[dyad] Added skeleton loader and improved UI - wrote 3 file(s)

src/components/meta-form.tsx

@@ -10,6 +10,7 @@ import { extractMetaData } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
 import { SerpPreview } from "./serp-preview";
+import { ResultsSkeleton } from "./results-skeleton";
 
 interface MetaData {
   title: string;
@@ -105,7 +106,9 @@ export function MetaForm() {
         )}
       </form>
 
-      {error && (
+      {loading && <ResultsSkeleton />}
+
+      {!loading && error && (
         <Card className="border-destructive bg-destructive/10">
           <CardContent className="p-4">
             <p className="text-destructive text-center">{error}</p>
@@ -113,7 +116,7 @@ export function MetaForm() {
         </Card>
       )}
 
-      {metaData && (
+      {!loading && metaData && (
         <Card className="w-full shadow-lg rounded-lg">
           <CardHeader>
             <CardTitle className="text-xl text-card-foreground">

src/components/results-skeleton.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ResultsSkeleton() {
+  return (
+    <Card className="w-full shadow-lg rounded-lg">
+      <CardHeader>
+        <Skeleton className="h-6 w-48" />
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            <div>
+              <Skeleton className="h-5 w-32 mb-2" />
+              <div className="p-4 border rounded-lg bg-muted/50 w-full">
+                <div className="flex items-center gap-2">
+                  <Skeleton className="w-7 h-7 rounded-full" />
+                  <div className="space-y-1.5">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-3 w-40" />
+                  </div>
+                </div>
+                <Skeleton className="h-6 w-full mt-3" />
+                <Skeleton className="h-4 w-full mt-2" />
+                <Skeleton className="h-4 w-3/4 mt-1.5" />
+              </div>
+            </div>
+            <div>
+              <Skeleton className="h-5 w-32 mb-2" />
+              <Skeleton className="aspect-video w-full rounded-md" />
+            </div>
+          </div>
+          <div className="space-y-6">
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <Skeleton className="h-5 w-24" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-8 w-8" />
+                  <Skeleton className="h-8 w-8" />
+                </div>
+              </div>
+              <Skeleton className="h-4 w-full mb-2" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <Skeleton className="h-5 w-36" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-8 w-8" />
+                  <Skeleton className="h-8 w-8" />
+                </div>
+              </div>
+              <Skeleton className="h-4 w-full mb-2" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/serp-preview.tsx

@@ -43,7 +43,7 @@ export function SerpPreview({ title, description, url }: SerpPreviewProps) {
       <h3 className="text-xl text-blue-600 dark:text-blue-400 mt-2 truncate font-medium">
         {title || "Meta Title Preview"}
       </h3>
-      <p className="text-sm text-muted-foreground mt-1">
+      <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
         {description ||
           "This is where the meta description will be displayed. It provides a brief summary of the page's content for search engine users."}
       </p>