From 3a51f87fc4458ac3fcb2dbdcbf8d1f04a1fd092b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ctan-nhu=E2=80=9D?= <“tan@harness.io”>
Date: Wed, 10 May 2023 17:23:25 -0700
Subject: [PATCH] feat: [CODE-307/308]: Remove unneccessary loading spinner

---
 web/src/components/Changes/Changes.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Changes/Changes.tsx b/web/src/components/Changes/Changes.tsx
index 8bb637f14..dc54c3f91 100644
--- a/web/src/components/Changes/Changes.tsx
+++ b/web/src/components/Changes/Changes.tsx
@@ -79,7 +79,7 @@ export const Changes: React.FC<ChangesProps> = ({
     lazy: !targetBranch || !sourceBranch
   })
   const {
-    data: activities,
+    data: prActivities,
     loading: loadingActivities,
     error: errorActivities,
     refetch: refetchActivities
@@ -87,7 +87,10 @@ export const Changes: React.FC<ChangesProps> = ({
     path: `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/activities`,
     lazy: !pullRequestMetadata?.number
   })
-
+  const [activities, setActivities] = useState<TypesPullReqActivity[]>()
+  const showSpinner = useMemo(() => {
+    return loading || (loadingActivities && !activities)
+  }, [loading, loadingActivities, activities])
   const diffStats = useMemo(
     () =>
       (diffs || []).reduce(
@@ -101,6 +104,18 @@ export const Changes: React.FC<ChangesProps> = ({
     [diffs]
   )
 
+  // Optimization to avoid showing unnecessary loading spinner. The trick is to
+  // show only the spinner when the component is mounted and not when refetching
+  // happens after some comments are authored.
+  useEffect(
+    function setActivitiesIfNotSet() {
+      if (prActivities) {
+        setActivities(prActivities)
+      }
+    },
+    [prActivities]
+  )
+
   useEffect(() => {
     if (prHasChanged) {
       refetchActivities()
@@ -144,7 +159,7 @@ export const Changes: React.FC<ChangesProps> = ({
 
   return (
     <Container className={cx(css.container, className)} {...(!!loading || !!error ? { flex: true } : {})}>
-      <LoadingSpinner visible={loading || loadingActivities} withBorder={true} />
+      <LoadingSpinner visible={loading || showSpinner} withBorder={true} />
       <Render when={error}>
         <PageError message={getErrorMessage(error || errorActivities)} onClick={voidFn(refetch)} />
       </Render>