From 499d14cf5b366351e274d1e7243638e4a547b029 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Tue, 20 Jan 2026 12:14:34 +0100
Subject: [PATCH] Reverted all changes back to version
 0d5065da813cfaad373bc19ec5c21c3bf1ee1a27

---
 src/components/meta-form.tsx        | 11 +++++++----
 src/components/results-skeleton.tsx | 30 +++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/components/results-skeleton.tsx

diff --git a/src/components/meta-form.tsx b/src/components/meta-form.tsx
index bbd19fb..1bbee15 100644
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -8,6 +8,7 @@ import { Globe } from "lucide-react";
 import { extractMetaData } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
+import { ResultsSkeleton } from "./results-skeleton";
 
 interface MetaData {
   title: string;
@@ -59,21 +60,23 @@ export function MetaForm() {
         <Button
           type="submit"
           disabled={loading}
-          className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all"
+          className="w-full sm:w-auto h-12 px-8 rounded-lg font-semibold transition-all hover:scale-105 active:scale-100"
         >
           {loading ? "Extracting..." : "Extract"}
         </Button>
       </form>
 
-      {error && (
+      {loading && <ResultsSkeleton />}
+
+      {error && !loading && (
         <Card className="border-destructive bg-destructive/10">
           <CardContent className="p-4">
-            <p className="text-destructive text-center">{error}</p>
+            <p className="text-destructive text-center font-medium">{error}</p>
           </CardContent>
         </Card>
       )}
 
-      {metaData && (
+      {metaData && !loading && (
         <Card className="w-full shadow-lg rounded-lg">
           <CardHeader>
             <CardTitle className="text-xl text-card-foreground">
diff --git a/src/components/results-skeleton.tsx b/src/components/results-skeleton.tsx
new file mode 100644
index 0000000..c898c05
--- /dev/null
+++ b/src/components/results-skeleton.tsx
@@ -0,0 +1,30 @@
+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 className="space-y-6">
+        <div>
+          <Skeleton className="h-5 w-32 mb-2" />
+          <Skeleton className="aspect-video w-full rounded-md" />
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <Skeleton className="h-5 w-24" />
+          </div>
+          <Skeleton className="h-12 w-full" />
+        </div>
+        <div>
+          <div className="flex items-center justify-between mb-1">
+            <Skeleton className="h-5 w-36" />
+          </div>
+          <Skeleton className="h-20 w-full" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file