remove long loading state, introduce loading to gallery and model list

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -6,6 +6,7 @@ import {
   FlexProps,
   Grid,
   Icon,
+  Skeleton,
   Text,
   VStack,
   forwardRef,
@@ -233,7 +234,7 @@ const ImageGalleryContent = () => {
         borderRadius: 'base',
       }}
     >
-      <Box sx={{ w: 'full' }}>
+      <Box sx={{ w: 'full', minWidth: '200px' }}>
         <Flex
           ref={resizeObserverRef}
           sx={{
@@ -355,7 +356,9 @@ const ImageGalleryContent = () => {
         </Box>
       </Box>
       <Flex direction="column" gap={2} h="full" w="full">
-        {images.length || areMoreAvailable ? (
+        {isLoading ? (
+          <LoadingGallery />
+        ) : images.length || areMoreAvailable ? (
           <>
             <Box ref={rootRef} data-overlayscrollbars="" h="100%">
               {shouldUseSingleGalleryColumn ? (
@@ -407,27 +410,7 @@ const ImageGalleryContent = () => {
             </IAIButton>
           </>
         ) : (
-          <Flex
-            sx={{
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 2,
-              padding: 8,
-              h: '100%',
-              w: '100%',
-              color: 'base.500',
-            }}
-          >
-            <Icon
-              as={MdPhotoLibrary}
-              sx={{
-                w: 16,
-                h: 16,
-              }}
-            />
-            <Text textAlign="center">{t('gallery.noImagesInGallery')}</Text>
-          </Flex>
+          <EmptyGallery />
         )}
       </Flex>
     </VStack>
@@ -462,4 +445,50 @@ const ListContainer = forwardRef((props: ListContainerProps, ref) => {
   );
 });
 
+const LoadingGallery = () => {
+  return (
+    <Box data-overlayscrollbars="" h="100%">
+      <VirtuosoGrid
+        style={{ height: '100%' }}
+        data={new Array(20)}
+        components={{
+          Item: ItemContainer,
+          List: ListContainer,
+        }}
+        itemContent={(index, item) => (
+          <Flex sx={{ pb: 2 }}>
+            <Skeleton sx={{ width: 'full', paddingBottom: '100%' }} />
+          </Flex>
+        )}
+      />
+    </Box>
+  );
+};
+const EmptyGallery = () => {
+  const { t } = useTranslation();
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        padding: 8,
+        h: '100%',
+        w: '100%',
+        color: 'base.500',
+      }}
+    >
+      <Icon
+        as={MdPhotoLibrary}
+        sx={{
+          w: 16,
+          h: 16,
+        }}
+      />
+      <Text textAlign="center">{t('gallery.noImagesInGallery')}</Text>
+    </Flex>
+  );
+};
+
 export default memo(ImageGalleryContent);

invokeai/frontend/web/src/features/gallery/store/imagesSlice.ts

@@ -41,7 +41,7 @@ export const initialImagesState =
     offset: 0,
     limit: 0,
     total: 0,
-    isLoading: false,
+    isLoading: true,
     categories: IMAGE_CATEGORIES,
   });
 

invokeai/frontend/web/src/features/system/components/ModelSelect.tsx

@@ -23,7 +23,7 @@ const ModelSelect = () => {
     (state: RootState) => state.generation.model
   );
 
-  const { data: pipelineModels } = useListModelsQuery({
+  const { data: pipelineModels, isLoading } = useListModelsQuery({
     model_type: 'main',
   });
 
@@ -78,7 +78,14 @@ const ModelSelect = () => {
     handleChangeModel(firstModel);
   }, [handleChangeModel, pipelineModels?.ids, selectedModelId]);
 
-  return (
+  return isLoading ? (
+    <IAIMantineSelect
+      label={t('modelManager.model')}
+      placeholder="Loading..."
+      disabled={true}
+      data={[]}
+    />
+  ) : (
     <IAIMantineSelect
       tooltip={selectedModel?.description}
       label={t('modelManager.model')}