From f3a1f98add86c9acc829cf5739b205b07166901d Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 4 Aug 2025 22:11:13 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(models):=20eliminate=20vendo?=
 =?UTF-8?q?r=20column=20flicker=20by=20loading=20vendors=20before=20models?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Why:
• The vendor list API is separate from the models API, causing the “Vendor” column in `ModelsTable` to flash (rendering `'-'` first, then updating) after the table finishes loading.
• This visual jump degrades the user experience.

What:
• Updated `web/src/hooks/models/useModelsData.js`
  – In the initial `useEffect`, vendors are fetched first with `loadVendors()` and awaited.
  – Only after vendors are ready do we call `loadModels()`, ensuring `vendorMap` is populated before the table renders.

Outcome:
• The table now renders with complete vendor data on first paint, removing the flicker and providing a smoother UI.
---
 web/src/hooks/models/useModelsData.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/hooks/models/useModelsData.js b/web/src/hooks/models/useModelsData.js
index da222429..8c17f78d 100644
--- a/web/src/hooks/models/useModelsData.js
+++ b/web/src/hooks/models/useModelsData.js
@@ -333,8 +333,11 @@ export const useModelsData = () => {
 
   // Initial load
   useEffect(() => {
-    loadVendors();
-    loadModels();
+    (async () => {
+      await loadVendors();
+      await loadModels();
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {