From 58087d9f5b02aadde3e0a5f97d9e02a61da9f3f5 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 22 Aug 2023 19:59:49 -0700
Subject: [PATCH] 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 |  3 ++-
 components/reps/GridRep/index.tsx         | 12 ++++++++++++
 pages/[username].tsx                      | 10 ++++++++--
 pages/saved.tsx                           | 10 ++++++++--
 pages/teams.tsx                           | 13 ++++++-------
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/components/reps/GridRep/index.module.scss b/components/reps/GridRep/index.module.scss
index b1929dd2..b5525d52 100644
--- a/components/reps/GridRep/index.module.scss
+++ b/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 {
diff --git a/components/reps/GridRep/index.tsx b/components/reps/GridRep/index.tsx
index 5be3da86..84e9b86e 100644
--- a/components/reps/GridRep/index.tsx
+++ b/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(() => {
diff --git a/pages/[username].tsx b/pages/[username].tsx
index b7a22f1b..1b7a976c 100644
--- a/pages/[username].tsx
+++ b/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)
-            else appendResults(results)
+            if (replace) {
+              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}
         />
       )
diff --git a/pages/saved.tsx b/pages/saved.tsx
index 19ca461f..dfe295da 100644
--- a/pages/saved.tsx
+++ b/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)
-          else appendResults(results)
+          if (replace) {
+            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}
         />
diff --git a/pages/teams.tsx b/pages/teams.tsx
index 48904c1e..f61e887e 100644
--- a/pages/teams.tsx
+++ b/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)
-          else appendResults(results)
-        })
-        .then(() => {
-          console.log('You are here')
-          setIsLoading(false)
+          if (replace) {
+            replaceResults(meta.count, results)
+            setIsLoading(false)
+          } else appendResults(results)
         })
         .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}
         />