🔧 chore: show loading state on fetching repo activities

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) => {
+        {isLoading ? (
-          return <ActivityCard activity={activity} key={`activity-${index}`} />;
+          <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>
   );

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>
   );
 };