fix: show loading spinner when fetching

Author: fboulnois

src/components/data_library/LibraryDataGrid.tsx

@@ -111,6 +111,23 @@ export const LibraryDataGrid: React.FC<LibraryDataGridProps> = ({
     return true
   }
 
+  // Show loading state when data is empty and loading
+  if (isEmpty(data) && loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '50vh',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  // Show empty state only when not loading and no data
   if (isEmpty(data) && !loading) {
     return (
       <Box

src/pages/DataLibrary.tsx

@@ -78,7 +78,7 @@ export const DataLibrary: React.FC = () => {
   }
 
   // Fetch data based on current state
-  const { data, isLoading, error } = useLibraryData(
+  const { data, isLoading, isFetching, error } = useLibraryData(
     libraryConfig,
     urlState.tab,
     urlState.filters,
@@ -227,7 +227,7 @@ export const DataLibrary: React.FC = () => {
           <LibraryDataGrid
             assetType={urlState.tab}
             data={data?.items || []}
-            loading={isLoading}
+            loading={isFetching}
             total={data?.total || 0}
             paginationModel={{
               page: urlState.page,