From 095008867f7c2c4d8729c76f44c504126ee8d055 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 7 Mar 2024 14:23:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20show=20loading=20state?=
 =?UTF-8?q?=20on=20fetching=20repo=20activities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/overview/Activity/Activity.tsx      | 17 ++++++++++++++---
 .../src/pages/org-slug/projects/id/Overview.tsx |  6 +++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
index 252d85a1..38b4d959 100644
--- a/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
+++ b/packages/frontend/src/components/projects/project/overview/Activity/Activity.tsx
@@ -4,10 +4,13 @@ import { GitCommitWithBranch } from 'types';
 import { Heading } from 'components/shared/Heading';
 import ActivityCard from './ActivityCard';
 import { Button } from 'components/shared/Button';
+import { LoadingIcon } from 'components/shared/CustomIcon';
 
 export const Activity = ({
+  isLoading,
   activities,
 }: {
+  isLoading: boolean;
   activities: GitCommitWithBranch[];
 }) => {
   return (
@@ -19,9 +22,17 @@ export const Activity = ({
         </Button>
       </div>
       <div className="mt-5">
-        {activities.map((activity, index) => {
-          return <ActivityCard activity={activity} key={`activity-${index}`} />;
-        })}
+        {isLoading ? (
+          <div className="grid place-content-center mt-10">
+            <LoadingIcon className="animate-spin" />
+          </div>
+        ) : (
+          activities.map((activity, index) => {
+            return (
+              <ActivityCard activity={activity} key={`activity-${index}`} />
+            );
+          })
+        )}
       </div>
     </div>
   );
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index c1337045..40975555 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -32,6 +32,7 @@ const OverviewTabPanel = () => {
   const { octokit } = useOctokit();
   const navigate = useNavigate();
   const [activities, setActivities] = useState<GitCommitWithBranch[]>([]);
+  const [fetchingActivities, setFetchingActivities] = useState(true);
   const [liveDomain, setLiveDomain] = useState<Domain>();
 
   const client = useGQLClient();
@@ -39,6 +40,7 @@ const OverviewTabPanel = () => {
   const { project } = useOutletContext<OutletContextType>();
 
   useEffect(() => {
+    setFetchingActivities(true);
     // TODO: Save repo commits in DB and avoid using GitHub API in frontend
     // TODO: Figure out fetching latest commits for all branches
     const fetchRepoActivity = async () => {
@@ -91,6 +93,8 @@ const OverviewTabPanel = () => {
 
         // TODO: Show warning in activity section on request error
         console.log(err.message);
+      } finally {
+        setFetchingActivities(false);
       }
     };
 
@@ -217,7 +221,7 @@ const OverviewTabPanel = () => {
           </p>
         )}
       </div>
-      <Activity activities={activities} />
+      <Activity activities={activities} isLoading={fetchingActivities} />
     </div>
   );
 };