update skeleton

app/home/(user)/(dashboard)/page.tsx

@@ -16,6 +16,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 import Dashboard from '../_components/dashboard';
 import DashboardCards from '../_components/dashboard-cards';
 import Recommendations from '../_components/recommendations';
+import RecommendationsSkeleton from '../_components/recommendations-skeleton';
 import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
 
 export const generateMetadata = async () => {
@@ -52,7 +53,10 @@ async function UserHomePage() {
       />
       <PageBody>
         <Dashboard account={account} bmiThresholds={bmiThresholds} />
-        <Suspense fallback={<Skeleton className="h-10 w-100" />}>
+        <h4>
+          <Trans i18nKey="dashboard:recommendations.title" />
+        </h4>
+        <Suspense fallback={<RecommendationsSkeleton />}>
           <Recommendations account={account} />
         </Suspense>
       </PageBody>

app/home/(user)/_components/recommendations-skeleton.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import { InfoTooltip } from '@/packages/shared/src/components/ui/info-tooltip';
+import { HeartPulse } from 'lucide-react';
+
+import { Button } from '@kit/ui/shadcn/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from '@kit/ui/shadcn/card';
+import { Skeleton } from '@kit/ui/skeleton';
+
+import OrderAnalysesCards from './order-analyses-cards';
+
+const RecommendationsSkeleton = () => {
+  const emptyData = [
+    {
+      title: '1',
+      description: '',
+      subtitle: '',
+      variant: { id: '' },
+      price: 1,
+    },
+    {
+      title: '2',
+      description: '',
+      subtitle: '',
+      variant: { id: '' },
+      price: 1,
+    },
+  ];
+  return (
+    <div className="xs:grid-cols-3 mt-4 grid gap-6">
+      {emptyData.map(({ title, description, subtitle }) => (
+        <Skeleton key={title}>
+          <Card>
+            <CardHeader className="flex-row">
+              <div
+                className={
+                  'mb-6 flex size-8 items-center-safe justify-center-safe'
+                }
+              />
+              <div className="ml-auto flex size-8 items-center-safe justify-center-safe">
+                <Button size="icon" className="px-2" />
+              </div>
+            </CardHeader>
+            <CardFooter className="flex">
+              <div className="flex flex-1 flex-col items-start">
+                <h5>
+                  {title}
+                  {description && (
+                    <>
+                      {'  '}
+                      <InfoTooltip
+                        content={
+                          <div className="flex flex-col gap-2">
+                            <span>{description}</span>
+                          </div>
+                        }
+                      />
+                    </>
+                  )}
+                </h5>
+                {subtitle && <CardDescription>{subtitle}</CardDescription>}
+              </div>
+              <div className="flex flex-col items-end gap-2 self-end text-sm"></div>
+            </CardFooter>
+          </Card>
+        </Skeleton>
+      ))}
+    </div>
+  );
+};
+
+export default RecommendationsSkeleton;

app/home/(user)/_components/recommendations.tsx

@@ -4,8 +4,6 @@ import React from 'react';
 
 import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
 
-import { Trans } from '@kit/ui/makerkit/trans';
-
 import { loadAnalyses } from '../_lib/server/load-analyses';
 import { loadRecommendations } from '../_lib/server/load-recommendations';
 import OrderAnalysesCards from './order-analyses-cards';
@@ -27,11 +25,6 @@ export default async function Recommendations({
   }
 
   return (
-    <div>
-      <h4>
-        <Trans i18nKey="dashboard:recommendations.title" />
-      </h4>
     <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
-    </div>
   );
 }

packages/ui/src/shadcn/skeleton.tsx

@@ -2,13 +2,23 @@ import { cn } from '../lib/utils';
 
 function Skeleton({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      className={cn('relative inline-block align-top', className)}
       {...props}
+    >
+      <div className="invisible">
+        {children ?? <span className="block h-4 w-24" />}
+      </div>
+
+      <div
+        aria-hidden
+        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
       />
+    </div>
   );
 }