[web] interviews/dashboard: better transitions for dashboard completion heatmap (#1000)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>

apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx

@@ -112,6 +112,7 @@ export default function InterviewsDashboardPage({
         {isLoggedIn && (
           <InterviewsDashboardProgressSection
             contributions={contributions}
+            isContributionsLoading={isContributionsLoading}
             questions={questions}
             questionsProgress={questionsProgress ?? []}
           />

apps/web/src/components/interviews/dashboard/InterviewsDashboardPageHeader.tsx

@@ -83,9 +83,12 @@ export default function InterviewsDashboardPageHeader({
                 themeGlassyBorder,
                 [
                   'transition-opacity duration-500',
-                  isContributionsLoading || currentMaxConsecutiveDays === 0
-                    ? 'opacity-0'
-                    : 'opacity-100',
+                  isContributionsLoading ? 'opacity-0' : 'opacity-100',
+                ],
+                [
+                  !isContributionsLoading &&
+                    currentMaxConsecutiveDays === 0 &&
+                    'hidden',
                 ],
               )}>
               <RiFlashlightFill
@@ -95,10 +98,15 @@ export default function InterviewsDashboardPageHeader({
           </Tooltip>
           <Text
             className={clsx(
-              'transition-opacity duration-500',
-              isContributionsLoading || currentMaxConsecutiveDays === 0
-                ? 'opacity-0'
-                : 'opacity-100',
+              [
+                'transition-opacity duration-500',
+                isContributionsLoading ? 'opacity-0' : 'opacity-100',
+              ],
+              [
+                !isContributionsLoading &&
+                  currentMaxConsecutiveDays === 0 &&
+                  'hidden',
+              ],
             )}
             color="secondary"
             size="body3">

apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsChart.tsx

@@ -20,6 +20,7 @@ const contributionColorMap: Record<number, string> = {
 type Props = Readonly<{
   contributions?: Record<string, number>;
   endTime: Date;
+  isContributionsLoading: boolean;
   startTime: Date;
 }>;
 
@@ -27,6 +28,7 @@ export default function InterviewsDashboardContributionsChart({
   contributions,
   startTime,
   endTime,
+  isContributionsLoading,
 }: Props) {
   const intl = useIntl();
   const months = useMemo(
@@ -112,6 +114,10 @@ export default function InterviewsDashboardContributionsChart({
                               dayOfWeek === 'Friday' && 'row-start-6',
                               dayOfWeek === 'Saturday' && 'row-start-7',
                             ],
+                            [
+                              'transition-colors duration-500',
+                              isContributionsLoading && contributionColorMap[0],
+                            ],
                             [
                               contributionCount >= 4
                                 ? contributionColorMap[4]

apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx

@@ -17,10 +17,12 @@ import { findMaxConsecutiveDays, getDateRangeFromToday } from './utils';
 
 type Props = Readonly<{
   contributions?: Record<string, number>;
+  isContributionsLoading: boolean;
 }>;
 
 export default function InterviewsDashboardContributionsHeatmapCard({
   contributions,
+  isContributionsLoading,
 }: Props) {
   const { startTime, endTime } = useMemo(() => getDateRangeFromToday(), []);
   const maxConsecutiveDays = findMaxConsecutiveDays(contributions);
@@ -39,7 +41,13 @@ export default function InterviewsDashboardContributionsHeatmapCard({
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
         {/* Contributions count */}
         <div className="flex items-center gap-2">
-          <Text color="secondary" size="body1">
+          <Text
+            className={clsx([
+              'transition-opacity duration-500',
+              isContributionsLoading ? 'opacity-0' : 'opacity-100',
+            ])}
+            color="secondary"
+            size="body1">
             <FormattedMessage
               defaultMessage="{count, plural, =0 {0 completions} one {<bold>{value}</bold> completion} other {<bold>{value}</bold> completions}} in the last year"
               description="Label for completions count"
@@ -89,6 +97,13 @@ export default function InterviewsDashboardContributionsHeatmapCard({
         {/* Active days and max streak */}
         <div className="flex flex-col flex-wrap items-start gap-x-4 gap-y-1.5 md:flex-row">
           <Tooltip
+            className={clsx(
+              [
+                'transition-opacity duration-500',
+                isContributionsLoading ? 'opacity-0' : 'opacity-100',
+              ],
+              [!isContributionsLoading && totalActiveDays === 0 && 'hidden'],
+            )}
             label={
               <FormattedMessage
                 defaultMessage="In the past year, you have been active for {days, plural, =0 {0 days} =1 {1 day} other {# days}}, completing at least one question each day."
@@ -99,7 +114,16 @@ export default function InterviewsDashboardContributionsHeatmapCard({
                 }}
               />
             }>
-            <Text color="secondary" size="body2">
+            <Text
+              className={clsx(
+                [
+                  'transition-opacity duration-500',
+                  isContributionsLoading ? 'opacity-0' : 'opacity-100',
+                ],
+                [!isContributionsLoading && totalActiveDays === 0 && 'hidden'],
+              )}
+              color="secondary"
+              size="body2">
               <FormattedMessage
                 defaultMessage="Total active days: <bold>{count}</bold>"
                 description="Label for active days"
@@ -116,6 +140,13 @@ export default function InterviewsDashboardContributionsHeatmapCard({
             </Text>
           </Tooltip>
           <Tooltip
+            className={clsx(
+              [
+                'transition-opacity duration-500',
+                isContributionsLoading ? 'opacity-0' : 'opacity-100',
+              ],
+              [!isContributionsLoading && maxConsecutiveDays === 0 && 'hidden'],
+            )}
             label={
               <FormattedMessage
                 defaultMessage="In the past year, you remained active for {days, plural, =0 {0 days} =1 {1 day} other {# consecutive days}}, completing at least one question per day"
@@ -126,7 +157,20 @@ export default function InterviewsDashboardContributionsHeatmapCard({
                 }}
               />
             }>
-            <Text color="secondary" size="body2">
+            <Text
+              className={clsx(
+                [
+                  'transition-opacity duration-500',
+                  isContributionsLoading ? 'opacity-0' : 'opacity-100',
+                ],
+                [
+                  !isContributionsLoading &&
+                    maxConsecutiveDays === 0 &&
+                    'hidden',
+                ],
+              )}
+              color="secondary"
+              size="body2">
               <FormattedMessage
                 defaultMessage="Max streak: <bold>{count}</bold>"
                 description="Label for max streak"
@@ -148,6 +192,7 @@ export default function InterviewsDashboardContributionsHeatmapCard({
       <InterviewsDashboardContributionsChart
         contributions={contributions}
         endTime={endTime}
+        isContributionsLoading={isContributionsLoading}
         startTime={startTime}
       />
     </div>

apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx

@@ -12,6 +12,7 @@ import InterviewsDashboardSolvedProblemsCard from './InterviewsDashboardSolvedPr
 
 type Props = Readonly<{
   contributions?: Record<string, number>;
+  isContributionsLoading: boolean;
   questions: {
     codingQuestions: ReadonlyArray<QuestionMetadata>;
     quizQuestions: ReadonlyArray<QuestionMetadata>;
@@ -26,6 +27,7 @@ export default function InterviewsDashboardProgressSection({
   questionsProgress,
   questions,
   contributions,
+  isContributionsLoading,
 }: Props) {
   return (
     <div className="flex flex-col gap-6">
@@ -48,6 +50,7 @@ export default function InterviewsDashboardProgressSection({
       </div>
       <InterviewsDashboardContributionsHeatmapCard
         contributions={contributions}
+        isContributionsLoading={isContributionsLoading}
       />
     </div>
   );