chore: [LC-1497] - Add AI Insights Empty Placeholder

.changeset/funny-pans-perform.md

@@ -0,0 +1,5 @@
+---
+"learn-card-app": patch
+---
+
+chore: [LC-1497] - Add AI Insights Empty Placeholder

apps/learn-card-app/src/hooks/useLogout.tsx

@@ -94,8 +94,6 @@ const useLogout = () => {
                     console.error(e);
                 }
 
-                closeAllModals();
-
                 await logout();
 
                 // handle redirect from within LCA over web3Auth redirect
@@ -109,6 +107,8 @@ const useLogout = () => {
                 });
             }
         }, 1000);
+
+        closeAllModals();
     };
 
     return { handleLogout, isLoggingOut: isLoggingOut || web3AuthLoggingOut };

apps/learn-card-app/src/pages/ai-insights/AiInsights.tsx

@@ -135,7 +135,7 @@ const AiInsights: React.FC = () => {
             <ShareInsightsCard />
             {!flags?.hideAiPathways && <AiInsightsLearningPathwaysCard />}
             {topSkills.length > 0 && <AiInsightsTopSkills topSkills={topSkills} />}
-            <AiInsightsSkillsCardSimple />
+            {topSkills.length > 0 && <AiInsightsSkillsCardSimple />}
             <AiInsightsLearningSnapshots isLoading={createAiInsightCredentialLoading} />
         </>
     );

apps/learn-card-app/src/pages/ai-insights/AiInsightsEmptyPlaceholder.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { AiPathwaysIconWithShape } from 'learn-card-base/svgs/wallet/AiPathwaysIcon';
+import CheckListButton from '../../components/learncard/checklist/CheckListButton';
+
+export const AiInsightsEmptyPlaceholder: React.FC = () => {
+    return (
+        <div className="w-full bg-white items-center justify-center flex flex-col shadow-bottom-2-4 px-[15px] py-[18px] rounded-[15px] mt-4">
+            <div className="w-full flex-col flex items-center justify-center gap-4">
+                <AiPathwaysIconWithShape className="w-auto h-[60px]" />
+                <div className="flex flex-col items-center justify-center gap-2">
+                    <h2 className="text-xl text-grayscale-800 font-notoSans">
+                        No AI Insights yet.
+                    </h2>
+                    <p className="text-sm text-grayscale-700 font-notoSans text-center">
+                        Build your LearnCard to unlock personalized learning insights and track your
+                        skill development journey.
+                    </p>
+                </div>
+                <CheckListButton />
+            </div>
+        </div>
+    );
+};
+
+export default AiInsightsEmptyPlaceholder;

apps/learn-card-app/src/pages/ai-insights/AiInsightsLearningSnapshotSkeletonLoader.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { IonSkeletonText } from '@ionic/react';
+
+const AiInsightsLearningSnapshotsSkeletonLoader: React.FC = () => {
+    return (
+        <div className="flex flex-col items-start justify-start px-2 w-full bg-white shadow-bottom-2-4 p-[15px] rounded-[15px] mb-4 mt-4">
+            <div className="flex items-center justify-start mt-2">
+                <IonSkeletonText
+                    animated
+                    style={{ width: '20px', height: '20px', borderRadius: '50%' }}
+                />
+
+                <IonSkeletonText
+                    animated
+                    style={{ width: '80px', height: '14px', marginLeft: '8px' }}
+                />
+            </div>
+
+            <IonSkeletonText
+                animated
+                style={{ width: '60%', height: '18px', marginTop: '12px', marginLeft: '4px' }}
+            />
+
+            <div className="w-full mt-2 ml-2 mr-2 mb-4">
+                <IonSkeletonText
+                    animated
+                    style={{ width: '90%', height: '14px', marginBottom: '6px' }}
+                />
+                <IonSkeletonText
+                    animated
+                    style={{ width: '80%', height: '14px', marginBottom: '6px' }}
+                />
+                <IonSkeletonText animated style={{ width: '70%', height: '14px' }} />
+            </div>
+        </div>
+    );
+};
+
+export default AiInsightsLearningSnapshotsSkeletonLoader;

apps/learn-card-app/src/pages/ai-insights/AiInsightsLearningSnapshots.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { IonSkeletonText } from '@ionic/react';
 import Trophy from 'learn-card-base/svgs/Trophy';
-import WrenchIcon from 'learn-card-base/svgs/WrenchIcon';
 import SproutIcon from 'learn-card-base/svgs/SproutIcon';
+import WrenchIcon from 'learn-card-base/svgs/WrenchIcon';
+import AiInsightsEmptyPlaceholder from './AiInsightsEmptyPlaceholder';
 import { AiPathwaysIconWithShape } from 'learn-card-base/svgs/wallet/AiPathwaysIcon';
+import AiInsightsLearningSnapshotsSkeletonLoader from './AiInsightsLearningSnapshotSkeletonLoader';
 
 import { useAiInsightCredential } from 'learn-card-base';
 
@@ -51,40 +52,11 @@ const AiInsightsLearningSnapshots: React.FC<{ isLoading: boolean }> = ({ isLoadi
     ];
 
     if (isLoading || aiInsightCredentialLoading) {
-        return (
-            <div className="flex flex-col items-start justify-start px-2 w-full bg-white shadow-bottom-2-4 p-[15px] rounded-[15px] mb-4">
-                <div className="flex items-center justify-start mt-2">
-                    <IonSkeletonText
-                        animated
-                        style={{ width: '20px', height: '20px', borderRadius: '50%' }}
-                    />
-
-                    <IonSkeletonText
-                        animated
-                        style={{ width: '80px', height: '14px', marginLeft: '8px' }}
-                    />
-                </div>
-
-                <IonSkeletonText
-                    animated
-                    style={{ width: '60%', height: '18px', marginTop: '12px', marginLeft: '4px' }}
-                />
-
-                <div className="w-full mt-2 ml-2 mr-2 mb-4">
-                    <IonSkeletonText
-                        animated
-                        style={{ width: '90%', height: '14px', marginBottom: '6px' }}
-                    />
-                    <IonSkeletonText
-                        animated
-                        style={{ width: '80%', height: '14px', marginBottom: '6px' }}
-                    />
-                    <IonSkeletonText animated style={{ width: '70%', height: '14px' }} />
-                </div>
-            </div>
-        );
+        return <AiInsightsLearningSnapshotsSkeletonLoader />;
     }
 
+    if (!aiInsightCredential) return <AiInsightsEmptyPlaceholder />;
+
     return (
         <div className="w-full bg-white items-center justify-center flex flex-col shadow-bottom-2-4 p-[15px] rounded-[15px] mb-4">
             <div className="w-full flex items-center justify-start">