From b7f76139e59cca9a226aa128df24990e2d839089 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Fri, 19 Apr 2024 09:34:37 +0530
Subject: [PATCH 1/3] adds loading state to teams list while fetching data

---
 web-server/src/components/TeamsList.tsx | 52 +++++++++++++++++++++----
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/web-server/src/components/TeamsList.tsx b/web-server/src/components/TeamsList.tsx
index 3de59254e..6aba79eca 100644
--- a/web-server/src/components/TeamsList.tsx
+++ b/web-server/src/components/TeamsList.tsx
@@ -10,10 +10,11 @@ import {
 import { useSnackbar } from 'notistack';
 import pluralize from 'pluralize';
 import { ascend } from 'ramda';
-import { FC, MouseEventHandler, useCallback, useMemo } from 'react';
+import { FC, MouseEventHandler, useCallback, useEffect, useMemo } from 'react';
 
 import { Integration } from '@/constants/integrations';
 import { ROUTES } from '@/constants/routes';
+import { FetchState } from '@/constants/ui-states';
 import { useAuth } from '@/hooks/useAuth';
 import { useBoolState, useEasyState } from '@/hooks/useEasyState';
 import { deleteTeam, fetchTeams } from '@/slices/team';
@@ -47,16 +48,32 @@ export const TeamsList = () => {
   }, [searchQuery.value, teamsArray]);
 
   const showCreate = useBoolState(false);
-  const showCreateTeam = useCallback(() => {
+  const handleShowCreateTeam = useCallback(() => {
     depFn(showCreate.toggle);
   }, [showCreate.toggle]);
 
+  const isLoadingTeams = useSelector(
+    (state) =>
+      state.team?.requests?.teams === FetchState.REQUEST ||
+      state.team?.requests?.orgRepos === FetchState.REQUEST
+  );
+  const animateFlicker = useBoolState(false);
+
+  useEffect(() => {
+    if (isLoadingTeams) {
+      const flickerInterval = setInterval(() => {
+        depFn(animateFlicker.toggle);
+      }, 500);
+      return () => clearInterval(flickerInterval);
+    }
+  }, [animateFlicker.toggle, isLoadingTeams]);
+
   return (
     <>
       <SearchFilter
         searchQuery={searchQuery.value}
         onChange={searchQuery.set}
-        showCreateTeam={showCreateTeam}
+        handleShowCreateTeam={handleShowCreateTeam}
         showCreate={showCreate.value}
       />
       {!teamsArrayFiltered.length && teamsArray.length ? (
@@ -64,10 +81,29 @@ export const TeamsList = () => {
           <Line secondary>No teams found</Line>
         </FlexBox>
       ) : null}
-      <FlexBox gap={4} grid gridTemplateColumns={'1fr 1fr '} maxWidth={'900px'}>
+      <FlexBox
+        gap={4}
+        grid
+        gridTemplateColumns={'1fr 1fr '}
+        maxWidth={'900px'}
+        relative
+        sx={{
+          opacity: isLoadingTeams ? (animateFlicker.value ? 0.2 : 0.5) : 1,
+          transition: 'opacity 0.5s linear'
+        }}
+      >
         {teamsArrayFiltered.map((team, index) => (
           <TeamCard onEdit={showCreate.false} key={index} team={team} />
         ))}
+        {isLoadingTeams && (
+          <FlexBox
+            fullWidth
+            height={'100%'}
+            sx={{ position: 'absolute' }}
+            top={0}
+            left={0}
+          />
+        )}
       </FlexBox>
     </>
   );
@@ -76,9 +112,9 @@ export const TeamsList = () => {
 const SearchFilter: FC<{
   searchQuery: string;
   onChange: (value: string) => void;
-  showCreateTeam: () => void;
+  handleShowCreateTeam: () => void;
   showCreate: boolean;
-}> = ({ searchQuery, onChange, showCreateTeam, showCreate }) => {
+}> = ({ searchQuery, onChange, handleShowCreateTeam, showCreate }) => {
   return (
     <FlexBox col gap={4}>
       <FlexBox width={'900px'} gap={4}>
@@ -95,7 +131,7 @@ const SearchFilter: FC<{
         <FlexBox flex1 alignCenter gap={4}>
           <FlexBox flex1>
             <Button
-              onClick={showCreateTeam}
+              onClick={handleShowCreateTeam}
               sx={{ width: '100%' }}
               variant="outlined"
             >
@@ -117,7 +153,7 @@ const SearchFilter: FC<{
           </FlexBox>
         </FlexBox>
       </FlexBox>
-      {showCreate && <CreateEditTeams onDiscard={showCreateTeam} />}
+      {showCreate && <CreateEditTeams onDiscard={handleShowCreateTeam} />}
     </FlexBox>
   );
 };

From 640fbe600e596c8232341b3ec71ba7a9c538e16d Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Fri, 19 Apr 2024 11:03:13 +0530
Subject: [PATCH 2/3] adds loading state for sync in progress

---
 .../content/DoraMetrics/DoraMetricsBody.tsx   | 60 ++++++++++++++-----
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
index f2eacea67..ab357370a 100644
--- a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
+++ b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
@@ -87,23 +87,36 @@ export const DoraMetricsBody = () => {
 
   const stats = useDoraStats();
 
+  const { isFreshOrg } = useFreshOrgCalculator();
+
   if (!firstLoadDone) return <MiniLoader label={getRandomLoadMsg()} />;
 
   if (isTeamInsightsEmpty)
-    return (
-      <EmptyState
-        type="NO_DATA_IN_DORA_METRICS"
-        title="Dora's not exploring today"
-        desc="We couldn't find any data to present. Perhaps you need to configure team repos."
-      >
-        <Link passHref href={ROUTES.TEAMS.PATH}>
-          <Button variant="contained" size="small">
-            Check Team Repos
-          </Button>
-        </Link>
-        <FixedContentRefreshLoader show={isLoading} />
-      </EmptyState>
-    );
+    if (isFreshOrg)
+      return (
+        <EmptyState
+          type="SYNC_IN_PROGRESS"
+          title="Sync in progress"
+          desc="Your data is syncing. Please reload in a few minutes."
+        >
+          <FixedContentRefreshLoader show={isLoading} />
+        </EmptyState>
+      );
+    else
+      return (
+        <EmptyState
+          type="NO_DATA_IN_DORA_METRICS"
+          title="Dora's not exploring today"
+          desc="We couldn't find any data to present. Perhaps you need to configure team repos."
+        >
+          <Link passHref href={ROUTES.TEAMS.PATH}>
+            <Button variant="contained" size="small">
+              Check Team Repos
+            </Button>
+          </Link>
+          <FixedContentRefreshLoader show={isLoading} />
+        </EmptyState>
+      );
 
   return (
     <FlexBox col gap2>
@@ -144,3 +157,22 @@ export const DoraMetricsBody = () => {
     </FlexBox>
   );
 };
+
+const FRESH_ORG_THRESHOLD = 5; // in minutes
+
+export const useFreshOrgCalculator = () => {
+  const result = { isFreshOrg: false };
+  const { org } = useAuth();
+  const createdAt = org?.created_at;
+  if (!createdAt) return result;
+  result.isFreshOrg = calculateIsFreshOrg(createdAt);
+  return result;
+};
+
+export const calculateIsFreshOrg = (createdAt: string | Date): boolean => {
+  const now = Date.now();
+  const date = new Date(createdAt);
+  const timeDiffMs = now - date.getTime();
+
+  return timeDiffMs <= FRESH_ORG_THRESHOLD * 60 * 1000;
+};

From 49a0a317dc4217ef65165b497738d64ad6dc68c8 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Fri, 19 Apr 2024 11:22:21 +0530
Subject: [PATCH 3/3] adds onSave and onDiscard callbacks

---
 .../src/components/OverlayComponents/TeamEdit.tsx   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/web-server/src/components/OverlayComponents/TeamEdit.tsx b/web-server/src/components/OverlayComponents/TeamEdit.tsx
index 29585f4d7..bd0fd3bad 100644
--- a/web-server/src/components/OverlayComponents/TeamEdit.tsx
+++ b/web-server/src/components/OverlayComponents/TeamEdit.tsx
@@ -3,21 +3,18 @@ import { FC } from 'react';
 import { CRUDProps } from '@/components/Teams/CreateTeams';
 
 import { FlexBox } from '../FlexBox';
+import { useOverlayPage } from '../OverlayPageContext';
 import { CreateEditTeams } from '../Teams/CreateTeams';
 
-export const TeamEdit: FC<CRUDProps> = ({
-  teamId,
-  hideCardComponents,
-  onSave,
-  onDiscard
-}) => {
+export const TeamEdit: FC<CRUDProps> = ({ teamId, hideCardComponents }) => {
+  const { removeAll } = useOverlayPage();
   return (
     <FlexBox>
       <CreateEditTeams
         teamId={teamId}
         hideCardComponents={hideCardComponents}
-        onDiscard={onDiscard}
-        onSave={onSave}
+        onDiscard={removeAll}
+        onSave={removeAll}
       />
     </FlexBox>
   );