improve ui loading

components/editor/ask-ai/index.tsx

@@ -167,11 +167,13 @@ export const AskAi = ({
           </div>
         )}
         <div className="w-full relative flex items-center justify-between">
-          {(isAiWorking || isUploading || isThinking) && (
+          {(isAiWorking || isUploading || isThinking || isLoadingProject) && (
             <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">
               <AiLoading
                 text={
-                  isUploading
+                  isLoadingProject
+                    ? "Fetching your project..."
+                    : isUploading
                     ? "Uploading images..."
                     : isAiWorking && !isSameHtml
                     ? "DeepSite is working..."

components/editor/preview/index.tsx

@@ -323,6 +323,25 @@ export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
               sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
               allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
             />
+            <div
+              className={classNames(
+                "w-full h-full flex items-center justify-center absolute left-0 top-0 bg-black/40 backdrop-blur-lg transition-all duration-200",
+                {
+                  "opacity-0 pointer-events-none": !globalAiLoading,
+                }
+              )}
+            >
+              <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
+                <AiLoading
+                  text={
+                    isLoadingProject ? "Fetching your project..." : undefined
+                  }
+                  className="flex-col"
+                />
+                <AnimatedBlobs />
+                <AnimatedBlobs />
+              </div>
+            </div>
             <HistoryNotification
               isVisible={!!currentCommit}
               isPromotingVersion={isPromotingVersion}