From e82b8619618030af4e2dbc43954336a5cee843b6 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@localai.io>
Date: Fri, 6 Mar 2026 09:34:54 +0100
Subject: [PATCH] fix(ui): do not lock all components during load

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/react-ui/src/pages/Home.jsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/core/http/react-ui/src/pages/Home.jsx b/core/http/react-ui/src/pages/Home.jsx
index 6f48bc2b0..cd65ca143 100644
--- a/core/http/react-ui/src/pages/Home.jsx
+++ b/core/http/react-ui/src/pages/Home.jsx
@@ -24,9 +24,10 @@ export default function Home() {
   const navigate = useNavigate()
   const { addToast } = useOutletContext()
   const { resources } = useResources()
-  const [configuredModels, setConfiguredModels] = useState([])
+  const [configuredModels, setConfiguredModels] = useState(null)
+  const configuredModelsRef = useRef(configuredModels)
+  configuredModelsRef.current = configuredModels
   const [loadedModels, setLoadedModels] = useState([])
-  const [initialLoaded, setInitialLoaded] = useState(false)
   const [selectedModel, setSelectedModel] = useState('')
   const [message, setMessage] = useState('')
   const [imageFiles, setImageFiles] = useState([])
@@ -52,9 +53,12 @@ export default function Home() {
       }
       if (v1Models?.data) {
         setConfiguredModels(v1Models.data)
+      } else if (configuredModelsRef.current === null) {
+        setConfiguredModels([])
       }
-      setInitialLoaded(true)
-    } catch (_e) { setInitialLoaded(true) }
+    } catch (_e) {
+      if (configuredModelsRef.current === null) setConfiguredModels([])
+    }
   }, [])
 
   useEffect(() => {
@@ -169,7 +173,8 @@ export default function Home() {
     }
   }
 
-  const hasModels = configuredModels.length > 0
+  const modelsLoading = configuredModels === null
+  const hasModels = modelsLoading || configuredModels.length > 0
   const loadedCount = loadedModels.length
 
   // Resource display
@@ -177,10 +182,6 @@ export default function Home() {
   const usagePct = resources?.aggregate?.usage_percent ?? resources?.ram?.usage_percent ?? 0
   const pctColor = usagePct > 90 ? 'var(--color-error)' : usagePct > 70 ? 'var(--color-warning)' : 'var(--color-success)'
 
-  if (!initialLoaded) {
-    return <div className="home-page" />
-  }
-
   return (
     <div className="home-page">
       {hasModels ? (