[WebUI] Model Manager Lag Fix (#2720)

Model Manager lags a bit if you have a lot of models.

Basically added a fake delay to rendering the model list so the modal
has time to load first. Hacky but if it works it works.

invokeai/frontend/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InvokeAI - A Stable Diffusion Toolkit</title>
     <link rel="shortcut icon" type="icon" href="./assets/favicon-0d253ced.ico" />
-    <script type="module" crossorigin src="./assets/index-c55cecd9.js"></script>
+    <script type="module" crossorigin src="./assets/index-fff3415a.js"></script>
     <link rel="stylesheet" href="./assets/index-14cb2922.css">
   </head>
 

invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx

@@ -1,20 +1,21 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
 import IAIInput from 'common/components/IAIInput';
-import { useMemo, useState, useTransition } from 'react';
+import IAIButton from 'common/components/IAIButton';
 
 import AddModel from './AddModel';
 import ModelListItem from './ModelListItem';
+import MergeModels from './MergeModels';
 
 import { useAppSelector } from 'app/storeHooks';
 import { useTranslation } from 'react-i18next';
 
-import IAIButton from 'common/components/IAIButton';
+import { createSelector } from '@reduxjs/toolkit';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import type { SystemState } from 'features/system/store/systemSlice';
 import { isEqual, map } from 'lodash';
+
+import React, { useMemo, useState, useTransition } from 'react';
 import type { ChangeEvent, ReactNode } from 'react';
-import MergeModels from './MergeModels';
 
 const modelListSelector = createSelector(
   systemSelector,
@@ -58,6 +59,16 @@ function ModelFilterButton({
 const ModelList = () => {
   const models = useAppSelector(modelListSelector);
 
+  const [renderModelList, setRenderModelList] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      setRenderModelList(true);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   const [searchText, setSearchText] = useState<string>('');
   const [isSelectedFilter, setIsSelectedFilter] = useState<
     'all' | 'ckpt' | 'diffusers'
@@ -217,7 +228,19 @@ const ModelList = () => {
             isActive={isSelectedFilter === 'diffusers'}
           />
         </Flex>
-        {renderModelListItems}
+
+        {renderModelList ? (
+          renderModelListItems
+        ) : (
+          <Flex
+            width="100%"
+            minHeight="30rem"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Spinner />
+          </Flex>
+        )}
       </Flex>
     </Flex>
   );