Implement loading reps

pages/[username].tsx

@@ -15,8 +15,9 @@ import { permissiveFilterset } from '~utils/defaultFilters'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 
-import GridRep from '~components/GridRep'
+import GridRep from '~components/reps/GridRep'
-import GridRepCollection from '~components/GridRepCollection'
+import GridRepCollection from '~components/reps/GridRepCollection'
+import LoadingRep from '~components/reps/LoadingRep'
 import ErrorSection from '~components/ErrorSection'
 import FilterBar from '~components/filters/FilterBar'
 import ProfileHead from '~components/head/ProfileHead'
@@ -265,6 +266,26 @@ const ProfileRoute: React.FC<Props> = ({
       )
     })
   }
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from(Array(number)).map((x, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+
+  const renderInfiniteScroll = (
+    <InfiniteScroll
+      dataLength={parties && parties.length > 0 ? parties.length : 0}
+      next={() => setCurrentPage(currentPage + 1)}
+      hasMore={totalPages > currentPage}
+      loader={renderLoading(3)}
+    >
+      <GridRepCollection>{renderParties()}</GridRepCollection>
+    </InfiniteScroll>
+  )
 
   if (context) {
     return (
@@ -285,18 +306,7 @@ const ProfileRoute: React.FC<Props> = ({
         </FilterBar>
 
         <section>
-          <InfiniteScroll
+          {renderInfiniteScroll}
-            dataLength={parties && parties.length > 0 ? parties.length : 0}
-            next={() => setCurrentPage(currentPage + 1)}
-            hasMore={totalPages > currentPage}
-            loader={
-              <div className="notFound">
-                <h2>{t('loading')}</h2>
-              </div>
-            }
-          >
-            <GridRepCollection>{renderParties()}</GridRepCollection>
-          </InfiniteScroll>
 
           {parties.length == 0 ? (
             <div className="notFound">

pages/saved.tsx

@@ -17,8 +17,9 @@ import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
 
 import ErrorSection from '~components/ErrorSection'
-import GridRep from '~components/GridRep'
+import GridRep from '~components/reps/GridRep'
-import GridRepCollection from '~components/GridRepCollection'
+import GridRepCollection from '~components/reps/GridRepCollection'
+import LoadingRep from '~components/reps/LoadingRep'
 import FilterBar from '~components/filters/FilterBar'
 import SavedHead from '~components/head/SavedHead'
 
@@ -306,6 +307,27 @@ const SavedRoute: React.FC<Props> = ({
     })
   }
 
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from(Array(number)).map((x, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+
+  const renderInfiniteScroll = (
+    <InfiniteScroll
+      dataLength={parties && parties.length > 0 ? parties.length : 0}
+      next={() => setCurrentPage(currentPage + 1)}
+      hasMore={totalPages > currentPage}
+      loader={renderLoading(3)}
+    >
+      <GridRepCollection>{renderParties()}</GridRepCollection>
+    </InfiniteScroll>
+  )
+
   if (context) {
     return (
       <div className="teams">
@@ -325,18 +347,7 @@ const SavedRoute: React.FC<Props> = ({
         </FilterBar>
 
         <section>
-          <InfiniteScroll
+          {renderInfiniteScroll}
-            dataLength={parties && parties.length > 0 ? parties.length : 0}
-            next={() => setCurrentPage(currentPage + 1)}
-            hasMore={totalPages > currentPage}
-            loader={
-              <div className="notFound">
-                <h2>{t('loading')}</h2>
-              </div>
-            }
-          >
-            <GridRepCollection>{renderParties()}</GridRepCollection>
-          </InfiniteScroll>
 
           {parties.length == 0 ? (
             <div className="notFound">

pages/teams.tsx

@@ -19,8 +19,9 @@ import { emptyPaginationObject } from '~utils/emptyStates'
 import { convertAdvancedFilters } from '~utils/convertAdvancedFilters'
 
 import ErrorSection from '~components/ErrorSection'
-import GridRep from '~components/GridRep'
+import GridRep from '~components/reps/GridRep'
-import GridRepCollection from '~components/GridRepCollection'
+import GridRepCollection from '~components/reps/GridRepCollection'
+import LoadingRep from '~components/reps/LoadingRep'
 import FilterBar from '~components/filters/FilterBar'
 import TeamsHead from '~components/head/TeamsHead'
 
@@ -55,6 +56,7 @@ const TeamsRoute: React.FC<Props> = ({
   // Set up app-specific states
   const [mounted, setMounted] = useState(false)
   const [scrolled, setScrolled] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
 
   // Set up page-specific states
   const [parties, setParties] = useState<Party[]>([])
@@ -122,6 +124,8 @@ const TeamsRoute: React.FC<Props> = ({
       appState.version = version
     }
     setCurrentPage(1)
+
+    setIsLoading(false)
   }, [])
 
   // Add scroll event listener for shadow on FilterBar on mount
@@ -151,6 +155,8 @@ const TeamsRoute: React.FC<Props> = ({
 
   const fetchTeams = useCallback(
     ({ replace }: { replace: boolean }) => {
+      setIsLoading(true)
+
       const filters: {
         [key: string]: any
       } = {
@@ -183,6 +189,10 @@ const TeamsRoute: React.FC<Props> = ({
           if (replace) replaceResults(meta.count, results)
           else appendResults(results)
         })
+        .then(() => {
+          console.log('You are here')
+          setIsLoading(false)
+        })
         .catch((error) => handleError(error))
     },
     [currentPage, parties, element, raid, recency, advancedFilters]
@@ -318,6 +328,27 @@ const TeamsRoute: React.FC<Props> = ({
     })
   }
 
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from(Array(number)).map((x, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+
+  const renderInfiniteScroll = (
+    <InfiniteScroll
+      dataLength={parties && parties.length > 0 ? parties.length : 0}
+      next={() => setCurrentPage(currentPage + 1)}
+      hasMore={totalPages > currentPage}
+      loader={renderLoading(3)}
+    >
+      <GridRepCollection>{renderParties()}</GridRepCollection>
+    </InfiniteScroll>
+  )
+
   if (context) {
     return (
       <div className="teams">
@@ -336,28 +367,7 @@ const TeamsRoute: React.FC<Props> = ({
           <h1>{t('teams.title')}</h1>
         </FilterBar>
 
-        <section>
+        <section>{renderInfiniteScroll}</section>
-          <InfiniteScroll
-            dataLength={parties && parties.length > 0 ? parties.length : 0}
-            next={() => setCurrentPage(currentPage + 1)}
-            hasMore={totalPages > currentPage}
-            loader={
-              <div className="notFound">
-                <h2>{t('loading')}</h2>
-              </div>
-            }
-          >
-            <GridRepCollection>{renderParties()}</GridRepCollection>
-          </InfiniteScroll>
-
-          {parties.length == 0 ? (
-            <div className="notFound">
-              <h2>{t('teams.not_found')}</h2>
-            </div>
-          ) : (
-            ''
-          )}
-        </section>
       </div>
     )
   } else return pageError()

styles/themes.scss

@@ -28,7 +28,9 @@
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
   --anonymous-bg: #{$anonymous--bg--light};
+
   --placeholder-bg: #{$grey-80};
+  --placeholder-bg-accent: #{$grey-75};
 
   --transparent-stroke: #{$transparent--stroke--light};
 
@@ -252,7 +254,9 @@
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
   --anonymous-bg: #{$anonymous--bg--dark};
+
   --placeholder-bg: #{$grey-40};
+  --placeholder-bg-accent: #{$grey-45};
 
   --transparent-stroke: #{$transparent--stroke--dark};
 

styles/variables.scss

@@ -45,6 +45,7 @@ $grey-20: #212121;
 $grey-25: #232323;
 $grey-30: #2f2f2f;
 $grey-40: #444;
+$grey-45: #515151;
 $grey-50: #777;
 $grey-55: #888;
 $grey-60: #a9a9a9;