fix: ensure that no empty virtuoso views are rendered

sanity-io · Sep 21, 2021 · 04904e5 · 04904e5
1 parent 94465a5
commit 04904e5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/components/AssetGridVirtualized/index.tsx b/src/components/AssetGridVirtualized/index.tsx
@@ -51,6 +51,10 @@ const AssetGridVirtualized = (props: Props) => {
   const selectedIds = (selectedAssets && selectedAssets.map(asset => asset._id)) || []
   const totalCount = items?.length
 
+  if (totalCount === 0) {
+    return null
+  }
+
   return (
     <VirtuosoGrid
       className="media__custom-scrollbar"

diff --git a/src/components/AssetTableVirtualized/index.tsx b/src/components/AssetTableVirtualized/index.tsx
@@ -41,6 +41,11 @@ const AssetTableVirtualized = (props: Props) => {
   const selectedAssets = useTypedSelector(state => state.selected.assets)
 
   const selectedIds = (selectedAssets && selectedAssets.map(asset => asset._id)) || []
+  const totalCount = items?.length
+
+  if (totalCount === 0) {
+    return null
+  }
 
   return (
     <GroupedVirtuoso
@@ -50,7 +55,7 @@ const AssetTableVirtualized = (props: Props) => {
         return item?.id || index
       }}
       endReached={onLoadMore}
-      groupCounts={Array(1).fill(items.length)}
+      groupCounts={Array(1).fill(totalCount)}
       groupContent={() => {
         return <TableHeader />
       }}

diff --git a/src/components/Items/index.tsx b/src/components/Items/index.tsx
@@ -43,20 +43,22 @@ const Items: FC = () => {
 
   return (
     <Box flex={1} style={{width: '100%'}}>
-      {isEmpty && (
+      {isEmpty ? (
         <Box padding={4}>
           <Text size={1} weight="semibold">
             No results for the current query
           </Text>
         </Box>
-      )}
-
-      {!isEmpty && view === 'grid' && (
-        <AssetGridVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
-      )}
+      ) : (
+        <>
+          {view === 'grid' && (
+            <AssetGridVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
+          )}
 
-      {!isEmpty && view === 'table' && (
-        <AssetTableVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
+          {view === 'table' && (
+            <AssetTableVirtualized items={combinedItems} onLoadMore={handleLoadMoreItems} />
+          )}
+        </>
       )}
     </Box>
   )