[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">