Fix unnecessary query count loading

frontend/src/components/list/SceneList.tsx

@@ -14,6 +14,7 @@ import {
   type SceneQueryInput,
   SceneSortEnum,
   SortDirectionEnum,
+  useSceneCount,
   useScenes,
 } from "src/graphql";
 import { usePagination, useQueryParams } from "src/hooks";
@@ -72,21 +73,36 @@ const SceneList: FC<Props> = ({
     params.favorite !== "NONE" && ensureEnum(FavoriteFilter, params.favorite);
 
   const { page, setPage } = usePagination();
-  const { loading, data } = useScenes({
-    input: {
-      page,
-      per_page: perPage,
-      sort,
-      direction,
-      ...filter,
-      favorites: (favoriteFilter !== undefined && favorite) || undefined,
-      tags:
-        tagsFilter ||
-        (params.tag
-          ? { value: [params.tag], modifier: CriterionModifier.INCLUDES }
-          : undefined),
-    },
-  });
+  const input: SceneQueryInput = {
+    page,
+    per_page: perPage,
+    sort,
+    direction,
+    ...filter,
+    favorites: (favoriteFilter !== undefined && favorite) || undefined,
+    tags:
+      tagsFilter ||
+      (params.tag
+        ? { value: [params.tag], modifier: CriterionModifier.INCLUDES }
+        : undefined),
+  };
+
+  const { loading, data } = useScenes({ input });
+
+  // A page that isn't full is the last one, so the total is known from the rows.
+  const scenes = data?.queryScenes.scenes;
+  const derivedCount =
+    scenes && scenes.length > 0 && scenes.length < perPage
+      ? (page - 1) * perPage + scenes.length
+      : undefined;
+
+  // Pinned to page 1 so the cache key is the filter alone and paging within a
+  // filter reuses the count rather than recounting.
+  const { data: countData } = useSceneCount(
+    { input: { ...input, page: 1 } },
+    loading || derivedCount !== undefined,
+  );
+  const count = derivedCount ?? countData?.queryScenes.count;
 
   if (!loading && !data) return <ErrorMessage error="Failed to load scenes." />;
 
@@ -162,7 +178,7 @@ const SceneList: FC<Props> = ({
     </>
   );
 
-  const scenes = (data?.queryScenes.scenes ?? []).map((scene) => (
+  const sceneCards = (scenes ?? []).map((scene) => (
     <Col xs={3} key={scene.id}>
       <SceneCard scene={scene} />
     </Col>
@@ -173,12 +189,12 @@ const SceneList: FC<Props> = ({
       page={page}
       setPage={setPage}
       perPage={perPage}
-      listCount={data?.queryScenes.count}
+      listCount={count}
       loading={loading}
       filters={filters}
       entityName="scenes"
     >
-      <Row>{scenes}</Row>
+      <Row>{sceneCards}</Row>
     </List>
   );
 };

frontend/src/graphql/queries/SceneCount.gql

@@ -0,0 +1,5 @@
+query SceneCount($input: SceneQueryInput!) {
+  queryScenes(input: $input) {
+    count
+  }
+}

frontend/src/graphql/queries/Scenes.gql

@@ -1,7 +1,6 @@
 #import "../fragments/QuerySceneFragment.gql"
 query Scenes($input: SceneQueryInput!) {
   queryScenes(input: $input) {
-    count
     scenes {
       ...QuerySceneFragment
     }

frontend/src/graphql/queries/index.ts

@@ -39,6 +39,8 @@ import {
   type QueryExistingPerformerQueryVariables,
   QueryExistingSceneDocument,
   type QueryExistingSceneQueryVariables,
+  SceneCountDocument,
+  type SceneCountQueryVariables,
   SceneDocument,
   ScenePairingsDocument,
   type ScenePairingsQueryVariables,
@@ -47,7 +49,6 @@ import {
   type ScenesQueryVariables,
   ScenesWithFingerprintsDocument,
   type ScenesWithFingerprintsQueryVariables,
-  ScenesWithoutCountDocument,
   SearchAllDocument,
   type SearchAllQuery,
   type SearchAllQueryVariables,
@@ -161,11 +162,11 @@ export const useScenesWithFingerprints = (
     skip,
   });
 
-export const useScenesWithoutCount = (
-  variables: ScenesQueryVariables,
+export const useSceneCount = (
+  variables: SceneCountQueryVariables,
   skip = false,
 ) =>
-  useQuery(ScenesWithoutCountDocument, {
+  useQuery(SceneCountDocument, {
     variables,
     skip,
   });

frontend/src/pages/home/Home.tsx

@@ -6,33 +6,28 @@ import { LoadingIndicator } from "src/components/fragments";
 
 import SceneCard from "src/components/sceneCard";
 import { ROUTE_SCENES } from "src/constants";
-import {
-  SceneSortEnum,
-  SortDirectionEnum,
-  useScenesWithoutCount,
-} from "src/graphql";
+import { SceneSortEnum, SortDirectionEnum, useScenes } from "src/graphql";
 
 const CLASSNAME = "HomePage";
 const CLASSNAME_SCENES = `${CLASSNAME}-scenes`;
 
 const ScenesComponent: FC = () => {
-  const { data: sceneData, loading: loadingRecent } = useScenesWithoutCount({
+  const { data: sceneData, loading: loadingRecent } = useScenes({
     input: {
       page: 1,
       per_page: 20,
       sort: SceneSortEnum.CREATED_AT,
       direction: SortDirectionEnum.DESC,
     },
   });
-  const { data: trendingData, loading: loadingTrending } =
-    useScenesWithoutCount({
-      input: {
-        page: 1,
-        per_page: 20,
-        sort: SceneSortEnum.TRENDING,
-        direction: SortDirectionEnum.DESC,
-      },
-    });
+  const { data: trendingData, loading: loadingTrending } = useScenes({
+    input: {
+      page: 1,
+      per_page: 20,
+      sort: SceneSortEnum.TRENDING,
+      direction: SortDirectionEnum.DESC,
+    },
+  });
 
   if (loadingTrending) return <LoadingIndicator message="Loading..." />;