fix serverDocCountAtom loading state displaying “of 0 rows”

src/atoms/tableScope/table.ts

@@ -239,5 +239,8 @@ export type AuditChangeFunction = (
  */
 export const auditChangeAtom = atom<AuditChangeFunction | undefined>(undefined);
 
-/** Store total  number of rows in firestore collection */
-export const serverDocCountAtom = atom(0)
+/**
+ * Store total number of rows in the table, respecting current filters.
+ * If `undefined`, the query hasn’t loaded yet.
+ */
+export const serverDocCountAtom = atom<number | undefined>(undefined);

src/components/TableToolbar/LoadedRowsStatus.tsx

@@ -10,7 +10,7 @@ import {
   tableScope,
   tableRowsAtom,
   tableNextPageAtom,
-  serverDocCountAtom
+  serverDocCountAtom,
 } from "@src/atoms/tableScope";
 import { spreadSx } from "@src/utils/ui";
 
@@ -58,20 +58,20 @@ const loadingIcon = (
 
 function LoadedRowsStatus() {
   const [tableNextPage] = useAtom(tableNextPageAtom, tableScope);
-  const [serverDocCount] = useAtom(serverDocCountAtom, tableScope)
-  const [tableRows] = useAtom(tableRowsAtom, tableScope)
-
+  const [serverDocCount] = useAtom(serverDocCountAtom, tableScope);
+  const [tableRows] = useAtom(tableRowsAtom, tableScope);
 
   if (tableNextPage.loading)
     return <StatusText>{loadingIcon}Loading more…</StatusText>;
 
-
   return (
     <Tooltip title="Syncing with database in realtime" describeChild>
       <StatusText>
         <SyncIcon style={{ transform: "rotate(45deg)" }} />
         Loaded {!tableNextPage.available && "all "}
-        {tableRows.length} {tableNextPage.available && `of ${serverDocCount}`} row{serverDocCount !== 1 && "s"}
+        {tableRows.length}
+        {serverDocCount !== undefined && ` of ${serverDocCount}`} row
+        {(serverDocCount ?? tableRows.length) !== 1 && "s"}
       </StatusText>
     </Tooltip>
   );

src/hooks/useFirestoreCollectionWithAtom.ts

@@ -22,7 +22,7 @@ import {
   QueryConstraint,
   WhereFilterOp,
   documentId,
-  getCountFromServer
+  getCountFromServer,
 } from "firebase/firestore";
 import { useErrorHandler } from "react-error-boundary";
 
@@ -64,7 +64,7 @@ interface IUseFirestoreCollectionWithAtomOptions<T> {
   /** Update this atom when we’re loading the next page, and if there is a next page available. Uses same scope as `dataScope`. */
   nextPageAtom?: PrimitiveAtom<NextPageState>;
   /** Set this atom's value to the number of docs in the collection on each new snapshot */
-  serverDocCountAtom?: PrimitiveAtom<number> | undefined;
+  serverDocCountAtom?: PrimitiveAtom<number | undefined>;
 }
 
 /**
@@ -96,7 +96,7 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
     updateDocAtom,
     deleteDocAtom,
     nextPageAtom,
-    serverDocCountAtom
+    serverDocCountAtom,
   } = options || {};
 
   const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
@@ -120,7 +120,10 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
     void
   >(nextPageAtom || (dataAtom as any), dataScope);
 
-  const setServerDocCountAtom = useSetAtom(serverDocCountAtom || (dataAtom as any), dataScope)
+  const setServerDocCountAtom = useSetAtom(
+    serverDocCountAtom || (dataAtom as any),
+    dataScope
+  );
 
   // Store if we’re at the last page to prevent a new query from being created
   const [isLastPage, setIsLastPage] = useState(false);
@@ -198,8 +201,8 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
           // on each new snapshot, use the query to get and set the document count from the server
           if (serverDocCountAtom) {
             getCountFromServer(memoizedQuery.unlimitedQuery).then((value) => {
-              setServerDocCountAtom(value.data().count)
-            })
+              setServerDocCountAtom(value.data().count);
+            });
           }
         } catch (error) {
           if (onError) onError(error as FirestoreError);
@@ -232,7 +235,8 @@ export function useFirestoreCollectionWithAtom<T = TableRow>(
     handleError,
     nextPageAtom,
     setNextPageAtom,
-    setServerDocCountAtom
+    serverDocCountAtom,
+    setServerDocCountAtom,
   ]);
 
   // Create variable for validity of query to pass to useEffect dependencies
@@ -339,7 +343,7 @@ const getQuery = <T>(
       limit,
       firestoreFilters,
       sorts,
-      unlimitedQuery: query<T>(collectionRef, ...firestoreFilters)
+      unlimitedQuery: query<T>(collectionRef, ...firestoreFilters),
     };
   } catch (e) {
     if (onError) onError(e as FirestoreError);
@@ -389,11 +393,15 @@ export const tableFiltersToFirestoreFilters = (filters: TableFilter[]) => {
       firestoreFilters.push(where(documentId(), "==", filter.value));
       continue;
     } else if (filter.operator === "color-equal") {
-      firestoreFilters.push(where(filter.key.concat(".hex"), "==", filter.value.hex.toString()))
-      continue
+      firestoreFilters.push(
+        where(filter.key.concat(".hex"), "==", filter.value.hex.toString())
+      );
+      continue;
     } else if (filter.operator === "color-not-equal") {
-      firestoreFilters.push(where(filter.key.concat(".hex"), "!=", filter.value.hex.toString()))
-      continue
+      firestoreFilters.push(
+        where(filter.key.concat(".hex"), "!=", filter.value.hex.toString())
+      );
+      continue;
     }
     firestoreFilters.push(
       where(filter.key, filter.operator as WhereFilterOp, filter.value)