From a7cb2d369640a221ebfc18ba34e16e223446f0f3 Mon Sep 17 00:00:00 2001
From: Rosario Moscato <rosariomoscatolab@gmail.com>
Date: Tue, 16 Sep 2025 16:33:10 +0200
Subject: [PATCH] feat: add loading spinner overlay for AI design generation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add full-screen loading overlay with animated spinner
- Display room type and design style during generation
- Include bouncing dots animation for visual feedback
- Use backdrop blur and semi-transparent background
- Show loading state when isGenerating is true

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/app/dashboard/page.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 735410d..d26c08d 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -6,7 +6,7 @@ import { UserProfile } from "@/components/auth/user-profile";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Lock, Upload, Palette, Download, Sparkles, Coins } from "lucide-react";
+import { Lock, Upload, Palette, Download, Sparkles, Coins, Loader2 } from "lucide-react";
 import Link from "next/link";
 
 const ROOM_TYPES = [
@@ -175,7 +175,31 @@ export default function DesignStudioPage() {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-7xl">
+    <div className="container mx-auto p-6 max-w-7xl relative">
+      {/* Loading Overlay */}
+      {isGenerating && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="bg-white dark:bg-gray-900 rounded-lg p-8 shadow-xl max-w-sm mx-4">
+            <div className="flex flex-col items-center space-y-4">
+              <div className="relative">
+                <Loader2 className="w-12 h-12 text-blue-600 animate-spin" />
+                <div className="absolute inset-0 bg-blue-600 rounded-full opacity-20 animate-ping"></div>
+              </div>
+              <div className="text-center space-y-2">
+                <h3 className="text-lg font-semibold">Generating Your Design</h3>
+                <p className="text-sm text-muted-foreground">
+                  Our AI is transforming your {selectedRoomType} with {selectedStyle} style...
+                </p>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce"></div>
+                  <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                  <div className="w-2 h-2 bg-blue-600 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
       {/* Header */}
       <div className="flex justify-between items-center mb-8">
         <div>