Further refine load transitions (#366)

* Wires up GridRep to accept a `loading` prop
* Only transitions when replacing
* Fade out and fade in transition different durations

components/reps/GridRep/index.module.scss

@@ -10,14 +10,15 @@
   min-width: 320px;
   width: 100%;
   opacity: 1;
-  transition: opacity 0.3s ease-in-out;
 
   &.visible {
+    transition: opacity 0.3s ease-in-out;
     opacity: 1;
   }
 
   &.hidden {
     opacity: 0;
+    transition: opacity 0.12s ease-in-out;
   }
 
   &:hover {

components/reps/GridRep/index.tsx

@@ -25,6 +25,7 @@ interface Props {
   fullAuto: boolean
   autoGuard: boolean
   favorited: boolean
+  loading: boolean
   createdAt: Date
   onClick: (shortcode: string) => void
   onSave?: (partyId: string, favorited: boolean) => void
@@ -74,6 +75,17 @@ const GridRep = (props: Props) => {
     [styles.grid]: true,
   })
 
+  useEffect(() => {
+    if (props.loading) {
+      setVisible(false)
+    } else {
+      const timeout = setTimeout(() => {
+        setVisible(true)
+      }, 150)
+      return () => clearTimeout(timeout)
+    }
+  }, [props.loading])
+
   useEffect(() => {
     setVisible(false) // Trigger fade out
     const timeout = setTimeout(() => {

pages/[username].tsx

@@ -55,6 +55,7 @@ const ProfileRoute: 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[]>([])
@@ -142,6 +143,8 @@ const ProfileRoute: React.FC<Props> = ({
 
   const fetchProfile = useCallback(
     ({ replace }: { replace: boolean }) => {
+      if (replace) setIsLoading(true)
+
       const filters = {
         params: {
           element: element != -1 ? element : undefined,
@@ -165,8 +168,10 @@ const ProfileRoute: React.FC<Props> = ({
             setTotalPages(meta.total_pages)
             setRecordCount(meta.count)
 
-            if (replace) replaceResults(meta.count, results)
+            if (replace) {
-            else appendResults(results)
+              setIsLoading(false)
+              replaceResults(meta.count, results)
+            } else appendResults(results)
           })
           .catch((error) => handleError(error))
       }
@@ -261,6 +266,7 @@ const ProfileRoute: React.FC<Props> = ({
           fullAuto={party.full_auto}
           autoGuard={party.auto_guard}
           key={`party-${i}`}
+          loading={isLoading}
           onClick={goTo}
         />
       )

pages/saved.tsx

@@ -54,6 +54,7 @@ const SavedRoute: 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[]>([])
@@ -140,6 +141,8 @@ const SavedRoute: React.FC<Props> = ({
 
   const fetchTeams = useCallback(
     ({ replace }: { replace: boolean }) => {
+      if (replace) setIsLoading(true)
+
       const filters: {
         [key: string]: any
       } = {
@@ -169,8 +172,10 @@ const SavedRoute: React.FC<Props> = ({
           setTotalPages(meta.total_pages)
           setRecordCount(meta.count)
 
-          if (replace) replaceResults(meta.count, results)
+          if (replace) {
-          else appendResults(results)
+            setIsLoading(false)
+            replaceResults(meta.count, results)
+          } else appendResults(results)
         })
         .catch((error) => handleError(error))
     },
@@ -300,6 +305,7 @@ const SavedRoute: React.FC<Props> = ({
           fullAuto={party.full_auto}
           autoGuard={party.auto_guard}
           key={`party-${i}`}
+          loading={isLoading}
           onClick={goTo}
           onSave={toggleFavorite}
         />

pages/teams.tsx

@@ -155,7 +155,7 @@ const TeamsRoute: React.FC<Props> = ({
 
   const fetchTeams = useCallback(
     ({ replace }: { replace: boolean }) => {
-      setIsLoading(true)
+      if (replace) setIsLoading(true)
 
       const filters: {
         [key: string]: any
@@ -186,12 +186,10 @@ const TeamsRoute: React.FC<Props> = ({
           setTotalPages(meta.total_pages)
           setRecordCount(meta.count)
 
-          if (replace) replaceResults(meta.count, results)
+          if (replace) {
-          else appendResults(results)
+            replaceResults(meta.count, results)
-        })
+            setIsLoading(false)
-        .then(() => {
+          } else appendResults(results)
-          console.log('You are here')
-          setIsLoading(false)
         })
         .catch((error) => handleError(error))
     },
@@ -321,6 +319,7 @@ const TeamsRoute: React.FC<Props> = ({
           fullAuto={party.full_auto}
           autoGuard={party.auto_guard}
           key={`party-${i}`}
+          loading={isLoading}
           onClick={goTo}
           onSave={toggleFavorite}
         />