refactor(AuthFilesPage): optimize provider list generation using useMemo for better performance

src/components/modelAlias/ModelMappingDiagram.module.scss

@@ -1,3 +1,5 @@
+@use '../../styles/variables' as *;
+
 .container {
   display: flex;
   position: relative;
@@ -143,7 +145,8 @@
   }
 }
 
-.sourceItem, .aliasItem {
+.sourceItem,
+.aliasItem {
   cursor: grab;
 
   &:active {
@@ -175,8 +178,7 @@
   right: -3px;
 }
 
-.aliasItem {
+.aliasItem {}
-}
 
 .providerBadge {
   font-size: 11px;

src/pages/AuthFilesPage.tsx

@@ -249,10 +249,7 @@ export function AuthFilesPage() {
 
   const disableControls = connectionStatus !== 'connected';
 
-  useEffect(() => {
+  const providerList = useMemo(() => {
-    let cancelled = false;
-
-    const loadAllModels = async () => {
     const providers = new Set<string>();
 
     Object.keys(modelAlias).forEach((provider) => {
@@ -270,8 +267,13 @@ export function AuthFilesPage() {
         if (key) providers.add(key);
       }
     });
+    return Array.from(providers);
+  }, [files, modelAlias]);
 
-      const providerList = Array.from(providers);
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadAllModels = async () => {
       if (providerList.length === 0) {
         if (!cancelled) setAllProviderModels({});
         return;
@@ -305,7 +307,7 @@ export function AuthFilesPage() {
     return () => {
       cancelled = true;
     };
-  }, [files, modelAlias]);
+  }, [providerList]);