loading state

components/editor/ask-ai/index.tsx

@@ -284,9 +284,70 @@ export function AskAI({
           {(isAiWorking || isUploading) && (
             <div className="absolute bg-neutral-800 top-0 left-4 w-[calc(100%-30px)] h-full z-1 flex items-start pt-3.5 justify-between max-lg:text-sm">
               <div className="flex items-center justify-start gap-2">
-                <Loading overlay={false} className="!size-4" />
+                <Loading overlay={false} className="!size-4 opacity-50" />
                 <p className="text-neutral-400 text-sm">
-                  {isUploading ? "Uploading images..." : "AI is working..."}
+                  {isUploading ? (
+                    "Uploading images..."
+                  ) : isAiWorking && !isSameHtml ? (
+                    "AI is working..."
+                  ) : (
+                    <span className="inline-flex">
+                      {[
+                        "D",
+                        "e",
+                        "e",
+                        "p",
+                        "S",
+                        "i",
+                        "t",
+                        "e",
+                        " ",
+                        "i",
+                        "s",
+                        " ",
+                        "T",
+                        "h",
+                        "i",
+                        "n",
+                        "k",
+                        "i",
+                        "n",
+                        "g",
+                        ".",
+                        ".",
+                        ".",
+                        " ",
+                        "W",
+                        "a",
+                        "i",
+                        "t",
+                        " ",
+                        "a",
+                        " ",
+                        "m",
+                        "o",
+                        "m",
+                        "e",
+                        "n",
+                        "t",
+                        ".",
+                        ".",
+                        ".",
+                      ].map((char, index) => (
+                        <span
+                          key={index}
+                          className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
+                          style={{
+                            animationDelay: `${index * 0.1}s`,
+                            animationDuration: "1.3s",
+                            animationIterationCount: "infinite",
+                          }}
+                        >
+                          {char === " " ? "\u00A0" : char}
+                        </span>
+                      ))}
+                    </span>
+                  )}
                 </p>
               </div>
               {isAiWorking && (

lib/prompts.ts

@@ -20,7 +20,8 @@ You create website in a way a designer would, using ONLY HTML, CSS and Javascrip
 Try to create the best UI possible. Important: Make the website responsive by using TailwindCSS. Use it as much as you can, if you can't use it, use custom css (make sure to import tailwind with <script src="https://cdn.tailwindcss.com"></script> in the head).
 Also try to elaborate as much as you can, to create something unique, with a great design.
 If you want to use ICONS import Feather Icons (Make sure to add <script src="https://unpkg.com/feather-icons"></script> and <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> in the head., and <script>feather.replace();</script> in the body. Ex : <i data-feather="user"></i>).
-If you want to use animations you can use: Animejs.com (Make sure to add <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> and <script>const { animate } = anime;</script> in the head.), AOS.com (Make sure to add <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> and <script>AOS.init();</script>).
+For scroll animations you can use: AOS.com (Make sure to add <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> and <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> and <script>AOS.init();</script>).
+For interactive animations you can use: Vanta.js (Make sure to add <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> and <script>VANTA.GLOBE({...</script> in the body.).
 You can create multiple pages website at once (following the format rules below) or a Single Page Application. If the user doesn't ask for a specific version, you have to determine the best version for the user, depending on the request. (Try to avoid the Single Page Application if the user asks for multiple pages.)
 ${PROMPT_FOR_IMAGE_GENERATION}
 No need to explain what you did. Just return the expected result. AVOID Chinese characters in the code if not asked by the user.