From 3dcce4604d88aabfcc4670adca51c88935259cdd Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Thu, 23 May 2024 13:02:45 +0530
Subject: [PATCH 1/5] fixes animation and copy for the sync-loader

---
 .../src/content/DoraMetrics/DoraMetricsBody.tsx       | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
index c652668c3..41a514eb1 100644
--- a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
+++ b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
@@ -109,9 +109,9 @@ export const DoraMetricsBody = () => {
           type="SYNC_IN_PROGRESS"
           title="Sync in progress"
           desc={
-            <FlexBox gap={1}>
+            <FlexBox>
               <MiniLoader
-                label={'Your repos are syncing, please wait for a few minutes'}
+                label={'Your repos are syncing, please wait for a few minutes.'}
               />
             </FlexBox>
           }
@@ -224,7 +224,7 @@ export const useSyncedRepos = () => {
   };
 };
 
-const ANIMATON_DURATION = 700;
+const ANIMATON_DURATION = 1000;
 
 const Syncing = () => {
   const flickerAnimation = useBoolState(false);
@@ -243,8 +243,9 @@ const Syncing = () => {
       gap={4}
       sx={{
         height: isSyncing ? '66px' : '0px',
-        opacity: flickerAnimation.value ? 1 : 0.6,
-        transition: `all ${isSyncing ? ANIMATON_DURATION : 200}ms linear`
+        mb: isSyncing ? 0 : -2,
+        opacity: !isSyncing ? 0 : flickerAnimation.value ? 1 : 0.6,
+        transition: `opacity ${ANIMATON_DURATION}ms linear, height 300ms ease, margin 300ms ease`
       }}
       overflow={'hidden'}
     >

From ed38e7c9b91ca86e4f5e0d0e74ae437b51337659 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Thu, 23 May 2024 13:13:23 +0530
Subject: [PATCH 2/5] creates synced-repos thunk

---
 web-server/src/slices/dora_metrics.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web-server/src/slices/dora_metrics.ts b/web-server/src/slices/dora_metrics.ts
index 4956aa69a..14dc1e0ac 100644
--- a/web-server/src/slices/dora_metrics.ts
+++ b/web-server/src/slices/dora_metrics.ts
@@ -133,6 +133,12 @@ export const doraMetricsSlice = createSlice({
       'deploymentPrs',
       (state, action) => (state.deploymentPrs = action.payload)
     );
+    addFetchCasesToReducer(
+      builder,
+      getSyncedRepos,
+      'bookmarkedRepos',
+      (state, action) => (state.bookmarkedRepos = action.payload)
+    );
   }
 });
 
@@ -207,3 +213,12 @@ export const fetchDeploymentPRs = createAsyncThunk(
     return await handleApi<PR[]>(`/internal/deployments/prs`, { params });
   }
 );
+
+export const getSyncedRepos = createAsyncThunk(
+  'dora_metrics/getSyncedRepos',
+  async (params: { team_id: ID }) => {
+    return await handleApi<ID[]>(
+      `/resources/teams/${params.team_id}/bookmarked_repos`
+    );
+  }
+);

From 63c74319deef1d2c27851ba26b2c06f450f847f1 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Thu, 23 May 2024 13:43:54 +0530
Subject: [PATCH 3/5] creates a skeletal card to depict loading state

---
 .../DoraMetrics/DoraCards/SkeletalCard.tsx    | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx

diff --git a/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
new file mode 100644
index 000000000..90937d595
--- /dev/null
+++ b/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
@@ -0,0 +1,70 @@
+import { Paper } from '@mui/material';
+import { FC, useEffect } from 'react';
+
+import { FlexBox } from '@/components/FlexBox';
+import { useBoolState } from '@/hooks/useEasyState';
+
+const ANIMATON_DURATION = 1000;
+
+export const SkeletalCard = () => {
+  const flickerAnimation = useBoolState();
+
+  useEffect(() => {
+    const flickerInterval = setInterval(
+      flickerAnimation.toggle,
+      ANIMATON_DURATION
+    );
+
+    return () => {
+      clearInterval(flickerInterval);
+    };
+  }, [flickerAnimation.toggle]);
+  return (
+    <FlexBox
+      minHeight={'15em'}
+      component={Paper}
+      col
+      relative
+      width={'100%'}
+      flexGrow={1}
+      overflow={'hidden'}
+      height={'100%'}
+      p={2}
+    >
+      <FlexBox
+        col
+        justifyBetween
+        height={'100%'}
+        sx={{
+          filter: `brightness(${flickerAnimation.value ? 0.7 : 1})`,
+          transition: `all ${ANIMATON_DURATION}ms linear`
+        }}
+      >
+        <FlexBox fullWidth justifyBetween>
+          <FlexBox gap1>
+            <Skeleton width="200px" />
+            <Skeleton width="30px" />
+          </FlexBox>
+          <Skeleton width="75px" />
+        </FlexBox>
+        <FlexBox col gap2>
+          <Skeleton width="100px" height="20px" />
+          <Skeleton width="200px" />
+          <Skeleton width="100px" height="20px" />
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
+const Skeleton: FC<{ width?: string; height?: string }> = ({
+  width = '150px',
+  height = '30px'
+}) => (
+  <FlexBox
+    height={height}
+    bgcolor={'#262E5E'}
+    width={width}
+    borderRadius={'20px'}
+  />
+);

From 5b134ee8010e5a39cbd9e79f804bdea67d1bc7b5 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Thu, 23 May 2024 14:36:18 +0530
Subject: [PATCH 4/5] dora-metric loading screen for first time repo sync

---
 .../content/DoraMetrics/DoraMetricsBody.tsx   | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
index 41a514eb1..ae3d70eb8 100644
--- a/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
+++ b/web-server/src/content/DoraMetrics/DoraMetricsBody.tsx
@@ -1,6 +1,6 @@
 import { Grid, Divider, Button } from '@mui/material';
 import Link from 'next/link';
-import { useEffect, useMemo } from 'react';
+import { FC, useEffect, useMemo } from 'react';
 
 import { DoraMetricsConfigurationSettings } from '@/components/DoraMetricsConfigurationSettings';
 import { DoraScore } from '@/components/DoraScore';
@@ -30,6 +30,7 @@ import { ClassificationPills } from './ClassificationPills';
 import { ChangeFailureRateCard } from './DoraCards/ChangeFailureRateCard';
 import { ChangeTimeCard } from './DoraCards/ChangeTimeCard';
 import { MeanTimeToRestoreCard } from './DoraCards/MeanTimeToRestoreCard';
+import { DataStillSyncing } from './DoraCards/SkeletalCard';
 import { WeeklyDeliveryVolumeCard } from './DoraCards/WeeklyDeliveryVolumeCard';
 
 export const DoraMetricsBody = () => {
@@ -103,22 +104,7 @@ export const DoraMetricsBody = () => {
     );
   if (!firstLoadDone) return <MiniLoader label={getRandomLoadMsg()} />;
   if (isTeamInsightsEmpty)
-    if (isSyncing)
-      return (
-        <EmptyState
-          type="SYNC_IN_PROGRESS"
-          title="Sync in progress"
-          desc={
-            <FlexBox>
-              <MiniLoader
-                label={'Your repos are syncing, please wait for a few minutes.'}
-              />
-            </FlexBox>
-          }
-        >
-          <FixedContentRefreshLoader show={isLoading} />
-        </EmptyState>
-      );
+    if (isSyncing) return <DataStillSyncing />;
     else
       return (
         <EmptyState
@@ -226,7 +212,7 @@ export const useSyncedRepos = () => {
 
 const ANIMATON_DURATION = 1000;
 
-const Syncing = () => {
+export const Syncing = () => {
   const flickerAnimation = useBoolState(false);
   const { isSyncing } = useSyncedRepos();
 
@@ -240,13 +226,27 @@ const Syncing = () => {
 
   return (
     <FlexBox
-      gap={4}
       sx={{
         height: isSyncing ? '66px' : '0px',
         mb: isSyncing ? 0 : -2,
-        opacity: !isSyncing ? 0 : flickerAnimation.value ? 1 : 0.6,
         transition: `opacity ${ANIMATON_DURATION}ms linear, height 300ms ease, margin 300ms ease`
       }}
+    >
+      <LoaderCore animation={flickerAnimation.value} />
+    </FlexBox>
+  );
+};
+
+export const LoaderCore: FC<{
+  animation?: boolean;
+}> = ({ animation }) => {
+  return (
+    <FlexBox
+      gap={4}
+      sx={{
+        transition: `opacity ${ANIMATON_DURATION}ms linear, height 300ms ease, margin 300ms ease`,
+        opacity: !animation ? 1 : 0.6
+      }}
       overflow={'hidden'}
     >
       <FlexBox
@@ -268,7 +268,7 @@ const Syncing = () => {
           height={'100%'}
         />
         <FlexBox height={'25px'} centered>
-          {isSyncing && <LoadingWrapper />}
+          {<LoadingWrapper />}
         </FlexBox>
         <Line color={'#1AE579'} medium big>
           Calculating Dora

From 5c5227b43c9e702599b047681901ae3828da3531 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Thu, 23 May 2024 14:37:39 +0530
Subject: [PATCH 5/5] creates skeletal for loading repos, for score and
 card-grid

---
 .../DoraMetrics/DoraCards/SkeletalCard.tsx    | 118 +++++++++++++++++-
 1 file changed, 115 insertions(+), 3 deletions(-)

diff --git a/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
index 90937d595..def45db67 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/SkeletalCard.tsx
@@ -1,12 +1,17 @@
-import { Paper } from '@mui/material';
+import { Paper, Grid, Divider, useTheme } from '@mui/material';
+import Link from 'next/link';
 import { FC, useEffect } from 'react';
 
 import { FlexBox } from '@/components/FlexBox';
+import { Line } from '@/components/Text';
 import { useBoolState } from '@/hooks/useEasyState';
+import { OPEN_IN_NEW_TAB_PROPS } from '@/utils/url';
+
+import { LoaderCore } from '../DoraMetricsBody';
 
 const ANIMATON_DURATION = 1000;
 
-export const SkeletalCard = () => {
+export const DataStillSyncing = () => {
   const flickerAnimation = useBoolState();
 
   useEffect(() => {
@@ -19,6 +24,30 @@ export const SkeletalCard = () => {
       clearInterval(flickerInterval);
     };
   }, [flickerAnimation.toggle]);
+  return (
+    <FlexBox col gap2>
+      <ScoreSkeleton />
+      <LoaderCore />
+      <Divider />
+      <Grid container spacing={4}>
+        <Grid item xs={12} md={6} order={1}>
+          <SkeletalCard animation={flickerAnimation.value} />
+        </Grid>
+        <Grid item xs={12} md={6} order={2}>
+          <SkeletalCard animation={flickerAnimation.value} />
+        </Grid>
+        <Grid item xs={12} md={6} order={3}>
+          <SkeletalCard animation={flickerAnimation.value} />
+        </Grid>
+        <Grid item xs={12} md={6} order={4}>
+          <SkeletalCard animation={flickerAnimation.value} />
+        </Grid>
+      </Grid>
+    </FlexBox>
+  );
+};
+
+const SkeletalCard: FC<{ animation?: boolean }> = ({ animation }) => {
   return (
     <FlexBox
       minHeight={'15em'}
@@ -36,7 +65,7 @@ export const SkeletalCard = () => {
         justifyBetween
         height={'100%'}
         sx={{
-          filter: `brightness(${flickerAnimation.value ? 0.7 : 1})`,
+          filter: `brightness(${animation ? 0.7 : 1})`,
           transition: `all ${ANIMATON_DURATION}ms linear`
         }}
       >
@@ -57,6 +86,89 @@ export const SkeletalCard = () => {
   );
 };
 
+const ScoreSkeleton: FC<{ animation?: boolean }> = ({ animation }) => {
+  const theme = useTheme();
+  const stats = {
+    avg: 2,
+    standard: 6.3,
+    lt: 4,
+    df: 5,
+    cfr: 6,
+    mttr: 7
+  };
+
+  return (
+    <FlexBox>
+      <FlexBox centered gap={1.5}>
+        <FlexBox col>
+          <Line bigish bold white>
+            Your DORA
+          </Line>
+          <Line bigish bold white>
+            Performance
+          </Line>
+        </FlexBox>
+
+        <FlexBox
+          col
+          height={'50px'}
+          centered
+          gap={'14px'}
+          ml={1}
+          sx={{
+            filter: `brightness(${animation ? 0.7 : 1})`,
+            transition: `all ${ANIMATON_DURATION}ms linear`
+          }}
+        >
+          <Skeleton height="12px" width="90px" />
+          <Skeleton height="12px" width="90px" />
+        </FlexBox>
+
+        <FlexBox col ml={4}>
+          <Line bigish bold white>
+            Industry
+          </Line>
+          <Line bigish bold white>
+            Standard
+          </Line>
+        </FlexBox>
+
+        <FlexBox
+          corner={theme.spacing(1)}
+          px={1.5}
+          sx={{
+            background: `linear-gradient(30deg,#8C7CF0, #3E2EA4)`
+          }}
+        >
+          <Line fontSize={'2.4em'} bold white>
+            {stats.standard}{' '}
+            <Line fontSize="0.8rem" ml="-4px">
+              / 10
+            </Line>
+          </Line>
+        </FlexBox>
+
+        <FlexBox col>
+          <Line bigish medium>
+            Based on data available
+          </Line>
+          <Line bigish>
+            at{' '}
+            <Line info semibold>
+              <Link
+                href="https://dora.dev/quickcheck"
+                {...OPEN_IN_NEW_TAB_PROPS}
+              >
+                dora.dev
+              </Link>
+            </Line>
+          </Line>
+        </FlexBox>
+      </FlexBox>
+    </FlexBox>
+  );
+};
+
 const Skeleton: FC<{ width?: string; height?: string }> = ({
   width = '150px',
   height = '30px'