update skeleton

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>
+    <OrderAnalysesCards analyses={orderAnalyses} countryCode={countryCode} />
   );
 }