From 3a950614eef44b89195552fe8298dacc17dcde13 Mon Sep 17 00:00:00 2001
From: DanielJames0302 <137600847+DanielJames0302@users.noreply.github.com>
Date: Sat, 16 Nov 2024 11:25:12 +0800
Subject: [PATCH] [web] interviews/dashboard: better transition for dashboard
 current streak label (#991)

---
 .../dashboard/InterviewsDashboardPage.tsx      |  3 ++-
 .../InterviewsDashboardPageHeader.tsx          | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
index a139f73fd..c9c4e9634 100644
--- a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
+++ b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
@@ -80,7 +80,7 @@ export default function InterviewsDashboardPage({
     },
   );
   const { startTime, endTime } = useMemo(() => getDateRangeFromToday(), []);
-  const { data: contributions } =
+  const { data: contributions, isLoading: isContributionsLoading } =
     trpc.questionProgress.getContributionsCount.useQuery(
       {
         endTime,
@@ -105,6 +105,7 @@ export default function InterviewsDashboardPage({
     <div className={clsx('flex flex-col gap-12')}>
       <InterviewsDashboardPageHeader
         contributions={contributions}
+        isContributionsLoading={isContributionsLoading}
         isLoggedIn={isLoggedIn}
       />
       <Section>
diff --git a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPageHeader.tsx b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPageHeader.tsx
index c99f4ef67..b46f98e54 100644
--- a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPageHeader.tsx
+++ b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPageHeader.tsx
@@ -18,12 +18,14 @@ import InterviewsDashboardCreateAccountCard from '../dashboard/InterviewsDashboa
 
 type Props = Readonly<{
   contributions?: Record<string, number>;
+  isContributionsLoading: boolean;
   isLoggedIn: boolean;
 }>;
 
 export default function InterviewsDashboardPageHeader({
   contributions,
   isLoggedIn,
+  isContributionsLoading,
 }: Props) {
   const intl = useIntl();
   const currentMaxConsecutiveDays =
@@ -79,13 +81,27 @@ export default function InterviewsDashboardPageHeader({
                 'flex items-center justify-center',
                 'size-5 rounded-full',
                 themeGlassyBorder,
+                [
+                  'transition-opacity duration-500',
+                  isContributionsLoading || currentMaxConsecutiveDays === 0
+                    ? 'opacity-0'
+                    : 'opacity-100',
+                ],
               )}>
               <RiFlashlightFill
                 className={clsx('size-3 shrink-0', themeTextColor)}
               />
             </div>
           </Tooltip>
-          <Text color="secondary" size="body3">
+          <Text
+            className={clsx(
+              'transition-opacity duration-500',
+              isContributionsLoading || currentMaxConsecutiveDays === 0
+                ? 'opacity-0'
+                : 'opacity-100',
+            )}
+            color="secondary"
+            size="body3">
             <FormattedMessage
               defaultMessage="{days, plural, =0 {<bold>0 days</bold>} =1 {<bold>1 day</bold>} other {<bold># days</bold>}} current streak"
               description="Label for max consecutive days"