diff --git a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
index b6fdb5bdc..2b7b0cb4c 100644
--- a/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
+++ b/apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
@@ -61,12 +61,10 @@ export default function InterviewsDashboardPage({
 }: Props) {
   const user = useUser();
   const isLoggedIn = defaultLoggedIn || !!user;
-  const { data: questionsProgress } = trpc.questionProgress.getAll.useQuery(
-    undefined,
-    {
+  const { data: questionsProgress, isLoading: isQuestionsProgressLoading } =
+    trpc.questionProgress.getAll.useQuery(undefined, {
       enabled: isLoggedIn,
-    },
-  );
+    });
 
   const { data: questionListSessions } =
     trpc.questionLists.getActiveSessions.useQuery(undefined, {
@@ -113,6 +111,7 @@ export default function InterviewsDashboardPage({
           <InterviewsDashboardProgressSection
             contributions={contributions}
             isContributionsLoading={isContributionsLoading}
+            isQuestionProgressLoading={isQuestionsProgressLoading}
             questions={questions}
             questionsProgress={questionsProgress ?? []}
           />
diff --git a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx
index c00b598ea..ecc8b282c 100644
--- a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx
+++ b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx
@@ -64,6 +64,10 @@ export default function InterviewsDashboardContributionsHeatmapCard({
             />
           </Text>
           <Tooltip
+            className={clsx([
+              'transition-opacity duration-500',
+              isContributionsLoading ? 'opacity-0' : 'opacity-100',
+            ])}
             label={
               <div>
                 <FormattedMessage
@@ -90,7 +94,10 @@ export default function InterviewsDashboardContributionsHeatmapCard({
               </div>
             }>
             <RiInformationLine
-              className={clsx('size-4', themeTextSubtleColor)}
+              className={clsx('size-4', themeTextSubtleColor, [
+                'transition-opacity duration-500',
+                isContributionsLoading ? 'opacity-0' : 'opacity-100',
+              ])}
             />
           </Tooltip>
         </div>
diff --git a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx
index 23ef1d700..9a59c2fc1 100644
--- a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx
+++ b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx
@@ -13,6 +13,7 @@ import InterviewsDashboardSolvedProblemsCard from './InterviewsDashboardSolvedPr
 type Props = Readonly<{
   contributions?: Record<string, number>;
   isContributionsLoading: boolean;
+  isQuestionProgressLoading: boolean;
   questions: {
     codingQuestions: ReadonlyArray<QuestionMetadata>;
     quizQuestions: ReadonlyArray<QuestionMetadata>;
@@ -28,6 +29,7 @@ export default function InterviewsDashboardProgressSection({
   questions,
   contributions,
   isContributionsLoading,
+  isQuestionProgressLoading,
 }: Props) {
   return (
     <div className="flex flex-col gap-6">
@@ -40,6 +42,7 @@ export default function InterviewsDashboardProgressSection({
       </Heading>
       <div className="grid gap-6 lg:grid-cols-2">
         <InterviewsDashboardSolvedProblemsCard
+          isQuestionProgressLoading={isQuestionProgressLoading}
           questions={questions}
           questionsProgress={questionsProgress}
         />
diff --git a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardSolvedProblemsCard.tsx b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardSolvedProblemsCard.tsx
index 86e7602f0..7e739a070 100644
--- a/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardSolvedProblemsCard.tsx
+++ b/apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardSolvedProblemsCard.tsx
@@ -23,6 +23,7 @@ import {
 import Tooltip from '~/components/ui/Tooltip';
 
 type Props = Readonly<{
+  isQuestionProgressLoading: boolean;
   questions: {
     codingQuestions: ReadonlyArray<QuestionMetadata>;
     quizQuestions: ReadonlyArray<QuestionMetadata>;
@@ -36,6 +37,7 @@ type Props = Readonly<{
 export default function InterviewsDashboardSolvedProblemsCard({
   questions,
   questionsProgress,
+  isQuestionProgressLoading,
 }: Props) {
   const intl = useIntl();
 
@@ -212,13 +214,23 @@ export default function InterviewsDashboardSolvedProblemsCard({
                 />
               }>
               <Heading
-                className={themeTextColor}
+                className={clsx(themeTextColor, [
+                  'transition-opacity duration-500',
+                  isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
+                ])}
                 color="custom"
                 level="heading5">
                 {completedCount}
               </Heading>
             </Tooltip>
-            <Text color="subtitle" size="body3" weight="medium">
+            <Text
+              className={clsx(themeTextColor, [
+                'transition-opacity duration-500',
+                isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
+              ])}
+              color="subtitle"
+              size="body3"
+              weight="medium">
               <FormattedMessage
                 defaultMessage="Solved"
                 description="Label for number of solved problems"
@@ -239,8 +251,20 @@ export default function InterviewsDashboardSolvedProblemsCard({
                 <Text size="body3" weight="medium">
                   {label}
                 </Text>
-                <Tooltip asChild={true} label={tooltip}>
-                  <Text size="body2" weight="bold">
+                <Tooltip
+                  asChild={true}
+                  className={clsx([
+                    'transition-opacity duration-500',
+                    isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
+                  ])}
+                  label={tooltip}>
+                  <Text
+                    className={clsx([
+                      'transition-opacity duration-500',
+                      isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
+                    ])}
+                    size="body2"
+                    weight="bold">
                     {completed}
                     <Text color="secondary" size="body3">
                       /{total}
@@ -252,12 +276,13 @@ export default function InterviewsDashboardSolvedProblemsCard({
                 backgroundClass={themeBackgroundLineEmphasizedColor}
                 heightClass="h-1.5"
                 label={label}
-                progressClass={
+                progressClass={clsx(
                   getProgressBarGradient({
                     total,
                     value: completed,
-                  }).className
-                }
+                  }).className,
+                  ['transition-all duration-1000 ease-in-out'],
+                )}
                 total={total}
                 value={completed}
               />