added loading when space is starting

frontend/src/App.jsx

@@ -15,6 +15,7 @@ function App() {
   const [linearLambdas, setLinearLambdas] = useState([0.5, 0.5]);
   const [mergedName, setMergedName] = useState("merged");
   const [numLayers, setNumLayers] = useState(12);
+  const [isSpaceLoading, setIsSpaceLoading] = useState(true);
 
   const { fetchModels, checkTaskStatus } = useAPI();
 
@@ -32,15 +33,20 @@ function App() {
             (result) => {
               if (result && Array.isArray(result.response)) {
                 setModels(result.response);
+                setIsSpaceLoading(false);
               }
             },
             (error) => {
               devError("Failed to load models:", error);
+              setIsSpaceLoading(false); // Set to false even on error
             }
           );
+        } else {
+          setIsSpaceLoading(false);
         }
       } catch (error) {
         devError("Error fetching models:", error);
+        setIsSpaceLoading(false); // Set to false even on error
       }
     };
 
@@ -78,6 +84,21 @@ function App() {
         </svg>
       </a>
 
+      {/* Loading Overlay */}
+      {isSpaceLoading && (
+        <div className="fixed inset-0 bg-background/90 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="text-center">
+            <div className="animate-spin w-12 h-12 border-4 border-primary-500 border-t-transparent rounded-full mx-auto mb-4"></div>
+            <h2 className="text-xl font-semibold text-foreground mb-2">
+              Space is starting up...
+            </h2>
+            <p className="text-secondary-600">
+              Initializing Evolution Transformer
+            </p>
+          </div>
+        </div>
+      )}
+
       <Options
         models={models}
         selectedModel1={selectedModel1}
@@ -92,6 +113,7 @@ function App() {
         setModels={setModels}
         mergedName={mergedName}
         setMergedName={setMergedName}
+        isSpaceLoading={isSpaceLoading}
       />
       <Recipe
         layerRecipe={layerRecipe}

frontend/src/components/Options.jsx

@@ -20,6 +20,7 @@ const Options = ({
   setModels,
   mergedName,
   setMergedName,
+  isSpaceLoading,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [mergeStatus, setMergeStatus] = useState("");
@@ -130,8 +131,10 @@ const Options = ({
             onSelect={setSelectedModel1}
             options={models}
             placeholder="Select base model..."
-            loading={models.length === 0}
-            loadingMessage="Loading models..."
+            loading={isSpaceLoading || models.length === 0}
+            loadingMessage={
+              isSpaceLoading ? "Space is starting up..." : "Loading models..."
+            }
             emptyMessage="No models available"
             showSearch={true}
             searchPlaceholder="Search models..."
@@ -143,8 +146,10 @@ const Options = ({
             onSelect={setSelectedModel2}
             options={models}
             placeholder="Select target model..."
-            loading={models.length === 0}
-            loadingMessage="Loading models..."
+            loading={isSpaceLoading || models.length === 0}
+            loadingMessage={
+              isSpaceLoading ? "Space is starting up..." : "Loading models..."
+            }
             emptyMessage="No models available"
             showSearch={true}
             searchPlaceholder="Search models..."
@@ -218,6 +223,7 @@ const Options = ({
               <button
                 onClick={handleMerge}
                 disabled={
+                  isSpaceLoading ||
                   isLoading ||
                   !selectedModel1 ||
                   !selectedModel2 ||
@@ -226,7 +232,12 @@ const Options = ({
                 }
                 className="w-full py-2.5 px-3 bg-gradient-to-r from-accent-500 to-primary-500 text-background font-medium rounded-lg hover:from-accent-600 hover:to-primary-600 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 text-sm"
               >
-                {isLoading ? (
+                {isSpaceLoading ? (
+                  <>
+                    <div className="animate-spin w-3.5 h-3.5 border-2 border-background border-t-transparent rounded-full"></div>
+                    <span>Starting up...</span>
+                  </>
+                ) : isLoading ? (
                   <>
                     <div className="animate-spin w-3.5 h-3.5 border-2 border-background border-t-transparent rounded-full"></div>
                     <span>Merging...</span>