@strapi/upload 5.51.1 → 5.52.0

package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.mjs

@@ -1,68 +1,245 @@
-import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { useState, useCallback, createElement, Fragment, useRef, useEffect, useMemo } from 'react';
+import { useDispatch, useStore } from 'react-redux';
+import { uploadApi } from '../../../services/api.mjs';
 import { useGetAssetsQuery } from '../../../services/assets.mjs';
 
 const PAGE_SIZE = 20;
-const useInfiniteAssets = ({ folder = null, sort } = {})=>{
-    const [page, setPage] = useState(1);
-    const lastResultsRef = useRef([]);
-    const isMountRef = useRef(true);
-    const { currentData: data, isLoading, isFetching, error } = useGetAssetsQuery({
-        folder,
+/**
+ * Concatenates the pages in ascending order, one entry per asset id.
+ *
+ * `Map.set` keeps the first insertion position but takes the latest value, so
+ * an asset that moved between pages after a mutation holds its place and shows
+ * fresh data instead of rendering twice under a duplicate key.
+ */ const flattenPages = (pages)=>{
+    const byId = new Map();
+    for (const page of Object.keys(pages).map(Number).sort((a, b)=>a - b)){
+        for (const asset of pages[page]){
+            byId.set(asset.id, asset);
+        }
+    }
+    return [
+        ...byId.values()
+    ];
+};
+/**
+ * Keeps one earlier page's `getAssets` query subscribed and reports its results
+ * back up whenever they change.
+ *
+ * The hook itself only subscribes the current (latest) page. Without these, a
+ * mutation invalidating `{Asset, LIST}` refetches that page alone and earlier
+ * pages stay frozen — a rename or delete on an earlier page never reaches the
+ * list until a folder/sort/search change. One subscriber per earlier
+ * page keeps them all subscribed so the invalidation refetches the whole list.
+ * Renders nothing; it exists only for the subscription + `onRefreshed` report.
+ */ const PageSubscriber = ({ queryArgs, page, onRefreshed })=>{
+    const { currentData } = useGetAssetsQuery({
+        ...queryArgs,
         page,
-        pageSize: PAGE_SIZE,
-        sort
+        pageSize: PAGE_SIZE
     });
-    const pagination = data?.pagination;
-    // Accumulate pages. When cache is invalidated the current page is refetched
-    // detect this and reset to avoid a gap in the results.
-    const assets = useMemo(()=>{
-        if (!data) {
-            return lastResultsRef.current;
+    const results = currentData?.results;
+    useEffect(()=>{
+        if (results) {
+            onRefreshed(page, results);
         }
-        const currentPageResults = data.results;
-        if (page === 1) {
-            lastResultsRef.current = currentPageResults;
-        } else {
-            // If accumulated length doesn't match expectation, cache was cleared
-            const expectedPrior = (page - 1) * PAGE_SIZE;
-            if (lastResultsRef.current.length < expectedPrior - PAGE_SIZE) {
-                return lastResultsRef.current;
-            }
-            // Only append if these aren't already accumulated
-            if (lastResultsRef.current.length < page * PAGE_SIZE) {
-                lastResultsRef.current = [
-                    ...lastResultsRef.current,
-                    ...currentPageResults
-                ];
+    // `results` is a stable reference per cache entry, so this only re-reports
+    // when a refetch actually replaces the page's data. Reporting the same
+    // reference the accumulator already holds is a no-op (see `onRefreshed`).
+    }, [
+        results,
+        page,
+        onRefreshed
+    ]);
+    return null;
+};
+/**
+ * Infinite scroll over `/upload/files`, keeping one accumulated slot per page.
+ *
+ * The caller MUST render the returned `subscribers` node — that is what keeps
+ * every loaded page subscribed, so `{Asset, LIST}` invalidations keep the whole
+ * list consistent rather than only the current page.
+ */ const useInfiniteAssets = ({ folder = null, sort, search, filters, enabled = true } = {})=>{
+    // Derived from the request args themselves, so a new filter can't reach the
+    // API without also invalidating what was accumulated under the old one.
+    const queryArgs = {
+        folder,
+        sort,
+        search,
+        filters
+    };
+    const queryKey = JSON.stringify(queryArgs);
+    // Identifies the list being viewed, ignoring the search term. Folder, sort
+    // and filter changes are single committed actions, so one clean reset per
+    // change is honest. Search is committed per keystroke on a 300ms debounce,
+    // and blanking the list on each one would strobe as the user types.
+    // The cost: through the search window the previous rows stay rendered and
+    // `hasNextPage` is false, so the list reads as complete until page 1 lands.
+    const listKey = JSON.stringify({
+        folder,
+        sort,
+        filters
+    });
+    const [pageState, setPageState] = useState({
+        queryKey,
+        page: 1
+    });
+    const [accumulated, setAccumulated] = useState({
+        queryKey,
+        listKey,
+        pages: {}
+    });
+    // Derived rather than read straight from state: the render that discovers
+    // the key change still reaches the query below, and a list with no page 1
+    // must never be requested at page 2.
+    const page = pageState.queryKey === queryKey ? pageState.page : 1;
+    if (pageState.queryKey !== queryKey) {
+        setPageState({
+            queryKey,
+            page: 1
+        });
+    }
+    const { currentData, isLoading, isFetching, error } = useGetAssetsQuery({
+        ...queryArgs,
+        page,
+        pageSize: PAGE_SIZE
+    }, {
+        skip: !enabled
+    });
+    const isSameQuery = accumulated.queryKey === queryKey;
+    // `currentData` is only ever the payload for the args just passed, so it
+    // belongs to this key at this page — nothing to infer. Its reference is
+    // stable per cache entry, so this settles after one extra render.
+    if (currentData && (!isSameQuery || accumulated.pages[page] !== currentData.results)) {
+        setAccumulated(isSameQuery ? {
+            ...accumulated,
+            pages: {
+                ...accumulated.pages,
+                [page]: currentData.results
+            },
+            pagination: currentData.pagination
+        } : {
+            queryKey,
+            listKey,
+            pages: {
+                [page]: currentData.results
+            },
+            pagination: currentData.pagination
+        });
+    }
+    // Merges a refetched earlier page back into the accumulator. Ignores reports
+    // for a superseded query, and no-ops when the reference is unchanged so a
+    // subscriber re-reporting its already-stored page can't loop.
+    const handlePageRefreshed = useCallback((refreshedPage, results)=>{
+        setAccumulated((prev)=>{
+            if (prev.queryKey !== queryKey || prev.pages[refreshedPage] === results) {
+                return prev;
             }
-        }
-        return lastResultsRef.current;
+            return {
+                ...prev,
+                pages: {
+                    ...prev.pages,
+                    [refreshedPage]: results
+                }
+            };
+        });
     }, [
-        data,
-        page
+        queryKey
     ]);
-    // Reset on filter/sort change — skip the initial mount since the memo
-    // already handles page 1 correctly
+    // One subscriber per earlier page (the current page is already subscribed by
+    // the query above). Keyed by queryKey so a folder/sort/search change remounts
+    // them against the new args instead of reusing a stale cache entry.
+    // `createElement` rather than JSX so this stays a plain `.ts` hook file.
+    const subscribers = createElement(Fragment, null, Array.from({
+        length: Math.max(0, page - 1)
+    }, (_, index)=>index + 1).map((earlierPage)=>createElement(PageSubscriber, {
+            key: `${queryKey}:${earlierPage}`,
+            queryArgs,
+            page: earlierPage,
+            onRefreshed: handlePageRefreshed
+        })));
+    // Drop the left folder's cached `getAssets` pages when the folder changes.
+    //
+    // RTK Query 1.9.7 leaves a query's store subscription in place when its last
+    // subscriber unmounts while a refetch is still in flight — e.g. a delete
+    // invalidates `{Asset, LIST}`, every loaded page starts refetching, and the
+    // user navigates away before those settle. Those stale subscriptions make the
+    // next `{Asset, LIST}` invalidation (an upload in the new folder) refetch the
+    // *previous* folder's pages: one bogus `/upload/files` request per loaded
+    // page. There is no public per-entry unsubscribe, so evict the left folder's
+    // entries outright — returning reloads from page 1, which the accumulator
+    // already does on a list change.
+    const dispatch = useDispatch();
+    const store = useStore();
+    const prevFolderRef = useRef(folder);
     useEffect(()=>{
-        if (isMountRef.current) {
-            isMountRef.current = false;
+        const prevFolder = prevFolderRef.current;
+        prevFolderRef.current = folder;
+        if (prevFolder === folder) {
             return;
         }
-        setPage(1);
-        lastResultsRef.current = [];
+        const apiState = store.getState()[uploadApi.reducerPath];
+        const removeQueryResult = uploadApi.internalActions.removeQueryResult;
+        Object.keys(apiState?.queries ?? {}).forEach((cacheKey)=>{
+            if (!cacheKey.startsWith('getAssets(')) {
+                return;
+            }
+            let args;
+            try {
+                args = JSON.parse(cacheKey.slice('getAssets('.length, -1));
+            } catch  {
+                return;
+            }
+            if (args.folder === prevFolder) {
+                dispatch(removeQueryResult({
+                    queryCacheKey: cacheKey
+                }));
+            }
+        });
     }, [
         folder,
-        sort
+        dispatch,
+        store
     ]);
-    const hasNextPage = pagination ? page < pagination.pageCount : false;
+    // Until the new list's first page lands the accumulator still holds the
+    // previous folder. Reported as loading so the page shows a spinner instead
+    // of the outgoing folder's assets under the incoming folder's header.
+    const isChangingList = accumulated.listKey !== listKey;
+    const assets = useMemo(()=>isChangingList ? [] : flattenPages(accumulated.pages), [
+        isChangingList,
+        accumulated.pages
+    ]);
+    // Deliberately the live value, not the stale-tolerant one below: paging must
+    // never be driven by a total that belongs to the previous query.
+    const hasNextPage = currentData ? page < currentData.pagination.pageCount : false;
     const isFetchingMore = isFetching && page > 1;
     const fetchNextPage = useCallback(()=>{
-        setPage((prev)=>prev + 1);
-    }, []);
+        setPageState((prev)=>({
+                queryKey,
+                page: (prev.queryKey === queryKey ? prev.page : 1) + 1
+            }));
+    }, [
+        queryKey
+    ]);
+    if (!enabled) {
+        return {
+            assets: [],
+            // No list to keep fresh while disabled, so nothing to subscribe.
+            subscribers: null,
+            pagination: undefined,
+            isLoading: false,
+            isFetchingMore: false,
+            hasNextPage: false,
+            fetchNextPage,
+            error: undefined
+        };
+    }
     return {
         assets,
-        pagination,
-        isLoading,
+        subscribers,
+        // Falls back to the accumulated total so a consumer showing the count
+        // doesn't flash zero mid-transition, matching the possibly stale `assets`.
+        pagination: currentData?.pagination ?? accumulated.pagination,
+        isLoading: isLoading || isChangingList,
         isFetchingMore,
         hasNextPage,
         fetchNextPage,

package/dist/admin/future/pages/Assets/hooks/useInfiniteAssets.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteAssets.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useInfiniteAssets.ts"],"sourcesContent":["import { useState, useCallback, useMemo, useEffect, useRef } from 'react';\n\nimport { useGetAssetsQuery } from '../../../services/assets';\n\nimport type { File } from '../../../../../../shared/contracts/files';\n\nconst PAGE_SIZE = 20;\n\ninterface UseInfiniteAssetsOptions {\n  folder?: number | null;\n  sort?: string;\n}\n\nconst useInfiniteAssets = ({ folder = null, sort }: UseInfiniteAssetsOptions = {}) => {\n  const [page, setPage] = useState(1);\n  const lastResultsRef = useRef<File[]>([]);\n  const isMountRef = useRef(true);\n\n  const {\n    currentData: data,\n    isLoading,\n    isFetching,\n    error,\n  } = useGetAssetsQuery({\n    folder,\n    page,\n    pageSize: PAGE_SIZE,\n    sort,\n  });\n\n  const pagination = data?.pagination;\n\n  // Accumulate pages. When cache is invalidated the current page is refetched\n  // detect this and reset to avoid a gap in the results.\n  const assets = useMemo(() => {\n    if (!data) {\n      return lastResultsRef.current;\n    }\n\n    const currentPageResults = data.results;\n\n    if (page === 1) {\n      lastResultsRef.current = currentPageResults;\n    } else {\n      // If accumulated length doesn't match expectation, cache was cleared\n      const expectedPrior = (page - 1) * PAGE_SIZE;\n      if (lastResultsRef.current.length < expectedPrior - PAGE_SIZE) {\n        return lastResultsRef.current;\n      }\n\n      // Only append if these aren't already accumulated\n      if (lastResultsRef.current.length < page * PAGE_SIZE) {\n        lastResultsRef.current = [...lastResultsRef.current, ...currentPageResults];\n      }\n    }\n\n    return lastResultsRef.current;\n  }, [data, page]);\n\n  // Reset on filter/sort change — skip the initial mount since the memo\n  // already handles page 1 correctly\n  useEffect(() => {\n    if (isMountRef.current) {\n      isMountRef.current = false;\n\n      return;\n    }\n    setPage(1);\n    lastResultsRef.current = [];\n  }, [folder, sort]);\n\n  const hasNextPage = pagination ? page < pagination.pageCount : false;\n  const isFetchingMore = isFetching && page > 1;\n\n  const fetchNextPage = useCallback(() => {\n    setPage((prev) => prev + 1);\n  }, []);\n\n  return { assets, pagination, isLoading, isFetchingMore, hasNextPage, fetchNextPage, error };\n};\n\nexport { useInfiniteAssets };\nexport { PAGE_SIZE };\n"],"names":["PAGE_SIZE","useInfiniteAssets","folder","sort","page","setPage","useState","lastResultsRef","useRef","isMountRef","currentData","data","isLoading","isFetching","error","useGetAssetsQuery","pageSize","pagination","assets","useMemo","current","currentPageResults","results","expectedPrior","length","useEffect","hasNextPage","pageCount","isFetchingMore","fetchNextPage","useCallback","prev"],"mappings":";;;AAMA,MAAMA,SAAAA,GAAY;AAOlB,MAAMC,iBAAAA,GAAoB,CAAC,EAAEC,MAAAA,GAAS,IAAI,EAAEC,IAAI,EAA4B,GAAG,EAAE,GAAA;AAC/E,IAAA,MAAM,CAACC,IAAAA,EAAMC,OAAAA,CAAQ,GAAGC,QAAAA,CAAS,CAAA,CAAA;IACjC,MAAMC,cAAAA,GAAiBC,OAAe,EAAE,CAAA;AACxC,IAAA,MAAMC,aAAaD,MAAAA,CAAO,IAAA,CAAA;IAE1B,MAAM,EACJE,WAAAA,EAAaC,IAAI,EACjBC,SAAS,EACTC,UAAU,EACVC,KAAK,EACN,GAAGC,iBAAAA,CAAkB;AACpBb,QAAAA,MAAAA;AACAE,QAAAA,IAAAA;QACAY,QAAAA,EAAUhB,SAAAA;AACVG,QAAAA;AACF,KAAA,CAAA;AAEA,IAAA,MAAMc,aAAaN,IAAAA,EAAMM,UAAAA;;;AAIzB,IAAA,MAAMC,SAASC,OAAAA,CAAQ,IAAA;AACrB,QAAA,IAAI,CAACR,IAAAA,EAAM;AACT,YAAA,OAAOJ,eAAea,OAAO;AAC/B,QAAA;QAEA,MAAMC,kBAAAA,GAAqBV,KAAKW,OAAO;AAEvC,QAAA,IAAIlB,SAAS,CAAA,EAAG;AACdG,YAAAA,cAAAA,CAAea,OAAO,GAAGC,kBAAAA;QAC3B,CAAA,MAAO;;AAEL,YAAA,MAAME,aAAAA,GAAiBnB,CAAAA,IAAAA,GAAO,CAAA,IAAKJ,SAAAA;AACnC,YAAA,IAAIO,eAAea,OAAO,CAACI,MAAM,GAAGD,gBAAgBvB,SAAAA,EAAW;AAC7D,gBAAA,OAAOO,eAAea,OAAO;AAC/B,YAAA;;AAGA,YAAA,IAAIb,eAAea,OAAO,CAACI,MAAM,GAAGpB,OAAOJ,SAAAA,EAAW;AACpDO,gBAAAA,cAAAA,CAAea,OAAO,GAAG;AAAIb,oBAAAA,GAAAA,cAAAA,CAAea,OAAO;AAAKC,oBAAAA,GAAAA;AAAmB,iBAAA;AAC7E,YAAA;AACF,QAAA;AAEA,QAAA,OAAOd,eAAea,OAAO;IAC/B,CAAA,EAAG;AAACT,QAAAA,IAAAA;AAAMP,QAAAA;AAAK,KAAA,CAAA;;;IAIfqB,SAAAA,CAAU,IAAA;QACR,IAAIhB,UAAAA,CAAWW,OAAO,EAAE;AACtBX,YAAAA,UAAAA,CAAWW,OAAO,GAAG,KAAA;AAErB,YAAA;AACF,QAAA;QACAf,OAAAA,CAAQ,CAAA,CAAA;QACRE,cAAAA,CAAea,OAAO,GAAG,EAAE;IAC7B,CAAA,EAAG;AAAClB,QAAAA,MAAAA;AAAQC,QAAAA;AAAK,KAAA,CAAA;AAEjB,IAAA,MAAMuB,WAAAA,GAAcT,UAAAA,GAAab,IAAAA,GAAOa,UAAAA,CAAWU,SAAS,GAAG,KAAA;IAC/D,MAAMC,cAAAA,GAAiBf,cAAcT,IAAAA,GAAO,CAAA;AAE5C,IAAA,MAAMyB,gBAAgBC,WAAAA,CAAY,IAAA;QAChCzB,OAAAA,CAAQ,CAAC0B,OAASA,IAAAA,GAAO,CAAA,CAAA;AAC3B,IAAA,CAAA,EAAG,EAAE,CAAA;IAEL,OAAO;AAAEb,QAAAA,MAAAA;AAAQD,QAAAA,UAAAA;AAAYL,QAAAA,SAAAA;AAAWgB,QAAAA,cAAAA;AAAgBF,QAAAA,WAAAA;AAAaG,QAAAA,aAAAA;AAAef,QAAAA;AAAM,KAAA;AAC5F;;;;"}
+{"version":3,"file":"useInfiniteAssets.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useInfiniteAssets.ts"],"sourcesContent":["import { createElement, Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDispatch, useStore } from 'react-redux';\n\nimport { uploadApi } from '../../../services/api';\nimport { useGetAssetsQuery } from '../../../services/assets';\n\nimport type { File, Pagination } from '../../../../../../shared/contracts/files';\n\nconst PAGE_SIZE = 20;\n\ninterface UseInfiniteAssetsOptions {\n  folder?: number | null;\n  sort?: string;\n  search?: string;\n  /** Extra `filters[$and]` entries for the files query. */\n  filters?: Record<string, unknown>[];\n  /** Structural switch: an `is [folder]`-only type badge means no file can match. */\n  enabled?: boolean;\n}\n\ninterface QueryArgs {\n  folder: number | null;\n  sort?: string;\n  search?: string;\n  filters?: Record<string, unknown>[];\n}\n\n/**\n * Everything loaded for one query identity.\n *\n * `queryKey` lags the live key while a new query is in flight — that lag is\n * what keeps the previous results on screen across a search change.\n */\ninterface Accumulated {\n  queryKey: string;\n  listKey: string;\n  pages: Record<number, File[]>;\n  pagination?: Pagination;\n}\n\ninterface PageState {\n  queryKey: string;\n  page: number;\n}\n\ntype PageRefreshedHandler = (page: number, results: File[]) => void;\n\n/**\n * Concatenates the pages in ascending order, one entry per asset id.\n *\n * `Map.set` keeps the first insertion position but takes the latest value, so\n * an asset that moved between pages after a mutation holds its place and shows\n * fresh data instead of rendering twice under a duplicate key.\n */\nconst flattenPages = (pages: Record<number, File[]>): File[] => {\n  const byId = new Map<number, File>();\n\n  for (const page of Object.keys(pages)\n    .map(Number)\n    .sort((a, b) => a - b)) {\n    for (const asset of pages[page]) {\n      byId.set(asset.id, asset);\n    }\n  }\n\n  return [...byId.values()];\n};\n\n/**\n * Keeps one earlier page's `getAssets` query subscribed and reports its results\n * back up whenever they change.\n *\n * The hook itself only subscribes the current (latest) page. Without these, a\n * mutation invalidating `{Asset, LIST}` refetches that page alone and earlier\n * pages stay frozen — a rename or delete on an earlier page never reaches the\n * list until a folder/sort/search change. One subscriber per earlier\n * page keeps them all subscribed so the invalidation refetches the whole list.\n * Renders nothing; it exists only for the subscription + `onRefreshed` report.\n */\nconst PageSubscriber = ({\n  queryArgs,\n  page,\n  onRefreshed,\n}: {\n  queryArgs: QueryArgs;\n  page: number;\n  onRefreshed: PageRefreshedHandler;\n}) => {\n  const { currentData } = useGetAssetsQuery({ ...queryArgs, page, pageSize: PAGE_SIZE });\n  const results = currentData?.results;\n\n  useEffect(() => {\n    if (results) {\n      onRefreshed(page, results);\n    }\n    // `results` is a stable reference per cache entry, so this only re-reports\n    // when a refetch actually replaces the page's data. Reporting the same\n    // reference the accumulator already holds is a no-op (see `onRefreshed`).\n  }, [results, page, onRefreshed]);\n\n  return null;\n};\n\n/**\n * Infinite scroll over `/upload/files`, keeping one accumulated slot per page.\n *\n * The caller MUST render the returned `subscribers` node — that is what keeps\n * every loaded page subscribed, so `{Asset, LIST}` invalidations keep the whole\n * list consistent rather than only the current page.\n */\nconst useInfiniteAssets = ({\n  folder = null,\n  sort,\n  search,\n  filters,\n  enabled = true,\n}: UseInfiniteAssetsOptions = {}) => {\n  // Derived from the request args themselves, so a new filter can't reach the\n  // API without also invalidating what was accumulated under the old one.\n  const queryArgs: QueryArgs = { folder, sort, search, filters };\n  const queryKey = JSON.stringify(queryArgs);\n  // Identifies the list being viewed, ignoring the search term. Folder, sort\n  // and filter changes are single committed actions, so one clean reset per\n  // change is honest. Search is committed per keystroke on a 300ms debounce,\n  // and blanking the list on each one would strobe as the user types.\n  // The cost: through the search window the previous rows stay rendered and\n  // `hasNextPage` is false, so the list reads as complete until page 1 lands.\n  const listKey = JSON.stringify({ folder, sort, filters });\n\n  const [pageState, setPageState] = useState<PageState>({ queryKey, page: 1 });\n  const [accumulated, setAccumulated] = useState<Accumulated>({ queryKey, listKey, pages: {} });\n\n  // Derived rather than read straight from state: the render that discovers\n  // the key change still reaches the query below, and a list with no page 1\n  // must never be requested at page 2.\n  const page = pageState.queryKey === queryKey ? pageState.page : 1;\n\n  if (pageState.queryKey !== queryKey) {\n    setPageState({ queryKey, page: 1 });\n  }\n\n  const { currentData, isLoading, isFetching, error } = useGetAssetsQuery(\n    {\n      ...queryArgs,\n      page,\n      pageSize: PAGE_SIZE,\n    },\n    { skip: !enabled }\n  );\n\n  const isSameQuery = accumulated.queryKey === queryKey;\n\n  // `currentData` is only ever the payload for the args just passed, so it\n  // belongs to this key at this page — nothing to infer. Its reference is\n  // stable per cache entry, so this settles after one extra render.\n  if (currentData && (!isSameQuery || accumulated.pages[page] !== currentData.results)) {\n    setAccumulated(\n      isSameQuery\n        ? {\n            ...accumulated,\n            pages: { ...accumulated.pages, [page]: currentData.results },\n            pagination: currentData.pagination,\n          }\n        : {\n            queryKey,\n            listKey,\n            pages: { [page]: currentData.results },\n            pagination: currentData.pagination,\n          }\n    );\n  }\n\n  // Merges a refetched earlier page back into the accumulator. Ignores reports\n  // for a superseded query, and no-ops when the reference is unchanged so a\n  // subscriber re-reporting its already-stored page can't loop.\n  const handlePageRefreshed = useCallback<PageRefreshedHandler>(\n    (refreshedPage, results) => {\n      setAccumulated((prev) => {\n        if (prev.queryKey !== queryKey || prev.pages[refreshedPage] === results) {\n          return prev;\n        }\n\n        return { ...prev, pages: { ...prev.pages, [refreshedPage]: results } };\n      });\n    },\n    [queryKey]\n  );\n\n  // One subscriber per earlier page (the current page is already subscribed by\n  // the query above). Keyed by queryKey so a folder/sort/search change remounts\n  // them against the new args instead of reusing a stale cache entry.\n  // `createElement` rather than JSX so this stays a plain `.ts` hook file.\n  const subscribers = createElement(\n    Fragment,\n    null,\n    Array.from({ length: Math.max(0, page - 1) }, (_, index) => index + 1).map((earlierPage) =>\n      createElement(PageSubscriber, {\n        key: `${queryKey}:${earlierPage}`,\n        queryArgs,\n        page: earlierPage,\n        onRefreshed: handlePageRefreshed,\n      })\n    )\n  );\n\n  // Drop the left folder's cached `getAssets` pages when the folder changes.\n  //\n  // RTK Query 1.9.7 leaves a query's store subscription in place when its last\n  // subscriber unmounts while a refetch is still in flight — e.g. a delete\n  // invalidates `{Asset, LIST}`, every loaded page starts refetching, and the\n  // user navigates away before those settle. Those stale subscriptions make the\n  // next `{Asset, LIST}` invalidation (an upload in the new folder) refetch the\n  // *previous* folder's pages: one bogus `/upload/files` request per loaded\n  // page. There is no public per-entry unsubscribe, so evict the left folder's\n  // entries outright — returning reloads from page 1, which the accumulator\n  // already does on a list change.\n  const dispatch = useDispatch();\n  const store = useStore();\n  const prevFolderRef = useRef(folder);\n  useEffect(() => {\n    const prevFolder = prevFolderRef.current;\n    prevFolderRef.current = folder;\n    if (prevFolder === folder) {\n      return;\n    }\n\n    const apiState = (store.getState() as Record<string, { queries?: Record<string, unknown> }>)[\n      uploadApi.reducerPath\n    ];\n    const removeQueryResult = (\n      uploadApi as unknown as {\n        internalActions: {\n          removeQueryResult: (payload: { queryCacheKey: string }) => { type: string };\n        };\n      }\n    ).internalActions.removeQueryResult;\n\n    Object.keys(apiState?.queries ?? {}).forEach((cacheKey) => {\n      if (!cacheKey.startsWith('getAssets(')) {\n        return;\n      }\n      let args: { folder?: number | null };\n      try {\n        args = JSON.parse(cacheKey.slice('getAssets('.length, -1));\n      } catch {\n        return;\n      }\n      if (args.folder === prevFolder) {\n        dispatch(removeQueryResult({ queryCacheKey: cacheKey }));\n      }\n    });\n  }, [folder, dispatch, store]);\n\n  // Until the new list's first page lands the accumulator still holds the\n  // previous folder. Reported as loading so the page shows a spinner instead\n  // of the outgoing folder's assets under the incoming folder's header.\n  const isChangingList = accumulated.listKey !== listKey;\n\n  const assets = useMemo(\n    () => (isChangingList ? [] : flattenPages(accumulated.pages)),\n    [isChangingList, accumulated.pages]\n  );\n\n  // Deliberately the live value, not the stale-tolerant one below: paging must\n  // never be driven by a total that belongs to the previous query.\n  const hasNextPage = currentData ? page < currentData.pagination.pageCount : false;\n  const isFetchingMore = isFetching && page > 1;\n\n  const fetchNextPage = useCallback(() => {\n    setPageState((prev) => ({\n      queryKey,\n      page: (prev.queryKey === queryKey ? prev.page : 1) + 1,\n    }));\n  }, [queryKey]);\n\n  if (!enabled) {\n    return {\n      assets: [] as File[],\n      // No list to keep fresh while disabled, so nothing to subscribe.\n      subscribers: null,\n      pagination: undefined,\n      isLoading: false,\n      isFetchingMore: false,\n      hasNextPage: false,\n      fetchNextPage,\n      error: undefined,\n    };\n  }\n\n  return {\n    assets,\n    subscribers,\n    // Falls back to the accumulated total so a consumer showing the count\n    // doesn't flash zero mid-transition, matching the possibly stale `assets`.\n    pagination: currentData?.pagination ?? accumulated.pagination,\n    isLoading: isLoading || isChangingList,\n    isFetchingMore,\n    hasNextPage,\n    fetchNextPage,\n    error,\n  };\n};\n\nexport { useInfiniteAssets };\nexport { PAGE_SIZE };\n"],"names":["PAGE_SIZE","flattenPages","pages","byId","Map","page","Object","keys","map","Number","sort","a","b","asset","set","id","values","PageSubscriber","queryArgs","onRefreshed","currentData","useGetAssetsQuery","pageSize","results","useEffect","useInfiniteAssets","folder","search","filters","enabled","queryKey","JSON","stringify","listKey","pageState","setPageState","useState","accumulated","setAccumulated","isLoading","isFetching","error","skip","isSameQuery","pagination","handlePageRefreshed","useCallback","refreshedPage","prev","subscribers","createElement","Fragment","Array","from","length","Math","max","_","index","earlierPage","key","dispatch","useDispatch","store","useStore","prevFolderRef","useRef","prevFolder","current","apiState","getState","uploadApi","reducerPath","removeQueryResult","internalActions","queries","forEach","cacheKey","startsWith","args","parse","slice","queryCacheKey","isChangingList","assets","useMemo","hasNextPage","pageCount","isFetchingMore","fetchNextPage","undefined"],"mappings":"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"}

package/dist/admin/future/pages/Assets/hooks/useInfiniteScrollSentinel.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Infinite-scroll trigger for the media library list.
+ *
+ * Returns a callback ref to place on a sentinel element rendered after the last
+ * row. Three deliberate choices:
+ *
+ * 1. **Loading is driven only by fresh observer readings.** A fetch fires from
+ *    the `IntersectionObserver` callback — never from a state/prop change — so
+ *    it can't react to a stale `isIntersecting` from before newly loaded rows
+ *    rendered (which fetched an extra page on every trigger).
+ *
+ * 2. **Each settled page re-observes the sentinel.** An `IntersectionObserver`
+ *    only fires on a *transition*. When the sentinel stays on screen (a page
+ *    that doesn't fill the viewport — tall viewport, short page, grid fitting
+ *    the whole page) it would never fire again and loading would stall. So when
+ *    `isFetchingMore` settles back to false we re-observe, forcing a fresh
+ *    reading against the new layout: still on screen → load the next page;
+ *    viewport now filled → stop.
+ *
+ * 3. **A callback ref, not a stable object ref.** The sentinel only mounts once
+ *    the first page has rendered (the list shows a loader before that). A
+ *    callback ref (re)binds the observer exactly when the node mounts/unmounts,
+ *    so the observer can't miss a sentinel that appears after the hook first ran.
+ */ const useInfiniteScrollSentinel = ({ hasNextPage, isFetchingMore, onLoadMore, options })=>{
+    const observerRef = React.useRef(null);
+    const nodeRef = React.useRef(null);
+    // Read through refs so the callback ref stays stable and the observer callback
+    // always sees the latest values. `options` is read once at attach time (see
+    // its JSDoc); `onLoadMore` need not be stable.
+    const optionsRef = React.useRef(options);
+    optionsRef.current = options;
+    const onLoadMoreRef = React.useRef(onLoadMore);
+    onLoadMoreRef.current = onLoadMore;
+    const hasNextPageRef = React.useRef(hasNextPage);
+    hasNextPageRef.current = hasNextPage;
+    const isFetchingMoreRef = React.useRef(isFetchingMore);
+    isFetchingMoreRef.current = isFetchingMore;
+    const sentinelRef = React.useCallback((node)=>{
+        observerRef.current?.disconnect();
+        nodeRef.current = node;
+        if (!node) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry])=>{
+            if (entry.isIntersecting && hasNextPageRef.current && !isFetchingMoreRef.current) {
+                onLoadMoreRef.current();
+            }
+        }, optionsRef.current);
+        observer.observe(node);
+        observerRef.current = observer;
+    }, []);
+    React.useEffect(()=>()=>observerRef.current?.disconnect(), []);
+    // Once a page settles, re-observe so a *fresh* reading against the new layout
+    // decides whether to keep loading — rather than a stale `isIntersecting` from
+    // before the rows rendered. Re-observing re-emits the current intersection
+    // even without a transition, which is what keeps loading a viewport that a
+    // single page didn't fill.
+    React.useEffect(()=>{
+        if (isFetchingMore || !observerRef.current || !nodeRef.current) {
+            return;
+        }
+        observerRef.current.unobserve(nodeRef.current);
+        observerRef.current.observe(nodeRef.current);
+    }, [
+        isFetchingMore
+    ]);
+    return sentinelRef;
+};
+
+exports.useInfiniteScrollSentinel = useInfiniteScrollSentinel;
+//# sourceMappingURL=useInfiniteScrollSentinel.js.map

package/dist/admin/future/pages/Assets/hooks/useInfiniteScrollSentinel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteScrollSentinel.js","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useInfiniteScrollSentinel.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseInfiniteScrollSentinelArgs {\n  /** Whether there is a further page to request. */\n  hasNextPage: boolean;\n  /** Whether a subsequent page is already in flight. */\n  isFetchingMore: boolean;\n  /** Called to request the next page. Held in a ref, so it need not be stable. */\n  onLoadMore: () => void;\n  /**\n   * Passed to the `IntersectionObserver`. Read once, when the sentinel node\n   * attaches — changing it afterwards does NOT rebuild the observer, so a\n   * later `threshold`/`rootMargin` is silently ignored. Pass a stable, ideally\n   * module-level, object.\n   */\n  options?: IntersectionObserverInit;\n}\n\n/**\n * Infinite-scroll trigger for the media library list.\n *\n * Returns a callback ref to place on a sentinel element rendered after the last\n * row. Three deliberate choices:\n *\n * 1. **Loading is driven only by fresh observer readings.** A fetch fires from\n *    the `IntersectionObserver` callback — never from a state/prop change — so\n *    it can't react to a stale `isIntersecting` from before newly loaded rows\n *    rendered (which fetched an extra page on every trigger).\n *\n * 2. **Each settled page re-observes the sentinel.** An `IntersectionObserver`\n *    only fires on a *transition*. When the sentinel stays on screen (a page\n *    that doesn't fill the viewport — tall viewport, short page, grid fitting\n *    the whole page) it would never fire again and loading would stall. So when\n *    `isFetchingMore` settles back to false we re-observe, forcing a fresh\n *    reading against the new layout: still on screen → load the next page;\n *    viewport now filled → stop.\n *\n * 3. **A callback ref, not a stable object ref.** The sentinel only mounts once\n *    the first page has rendered (the list shows a loader before that). A\n *    callback ref (re)binds the observer exactly when the node mounts/unmounts,\n *    so the observer can't miss a sentinel that appears after the hook first ran.\n */\nexport const useInfiniteScrollSentinel = ({\n  hasNextPage,\n  isFetchingMore,\n  onLoadMore,\n  options,\n}: UseInfiniteScrollSentinelArgs) => {\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  // Read through refs so the callback ref stays stable and the observer callback\n  // always sees the latest values. `options` is read once at attach time (see\n  // its JSDoc); `onLoadMore` need not be stable.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const onLoadMoreRef = useRef(onLoadMore);\n  onLoadMoreRef.current = onLoadMore;\n  const hasNextPageRef = useRef(hasNextPage);\n  hasNextPageRef.current = hasNextPage;\n  const isFetchingMoreRef = useRef(isFetchingMore);\n  isFetchingMoreRef.current = isFetchingMore;\n\n  const sentinelRef = useCallback((node: HTMLElement | null) => {\n    observerRef.current?.disconnect();\n    nodeRef.current = node;\n\n    if (!node) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting && hasNextPageRef.current && !isFetchingMoreRef.current) {\n        onLoadMoreRef.current();\n      }\n    }, optionsRef.current);\n\n    observer.observe(node);\n    observerRef.current = observer;\n  }, []);\n\n  useEffect(() => () => observerRef.current?.disconnect(), []);\n\n  // Once a page settles, re-observe so a *fresh* reading against the new layout\n  // decides whether to keep loading — rather than a stale `isIntersecting` from\n  // before the rows rendered. Re-observing re-emits the current intersection\n  // even without a transition, which is what keeps loading a viewport that a\n  // single page didn't fill.\n  useEffect(() => {\n    if (isFetchingMore || !observerRef.current || !nodeRef.current) {\n      return;\n    }\n\n    observerRef.current.unobserve(nodeRef.current);\n    observerRef.current.observe(nodeRef.current);\n  }, [isFetchingMore]);\n\n  return sentinelRef;\n};\n"],"names":["useInfiniteScrollSentinel","hasNextPage","isFetchingMore","onLoadMore","options","observerRef","useRef","nodeRef","optionsRef","current","onLoadMoreRef","hasNextPageRef","isFetchingMoreRef","sentinelRef","useCallback","node","disconnect","observer","IntersectionObserver","entry","isIntersecting","observe","useEffect","unobserve"],"mappings":";;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;AAuBC,IACM,MAAMA,yBAAAA,GAA4B,CAAC,EACxCC,WAAW,EACXC,cAAc,EACdC,UAAU,EACVC,OAAO,EACuB,GAAA;AAC9B,IAAA,MAAMC,cAAcC,YAAAA,CAAoC,IAAA,CAAA;AACxD,IAAA,MAAMC,UAAUD,YAAAA,CAA2B,IAAA,CAAA;;;;AAK3C,IAAA,MAAME,aAAaF,YAAAA,CAAOF,OAAAA,CAAAA;AAC1BI,IAAAA,UAAAA,CAAWC,OAAO,GAAGL,OAAAA;AACrB,IAAA,MAAMM,gBAAgBJ,YAAAA,CAAOH,UAAAA,CAAAA;AAC7BO,IAAAA,aAAAA,CAAcD,OAAO,GAAGN,UAAAA;AACxB,IAAA,MAAMQ,iBAAiBL,YAAAA,CAAOL,WAAAA,CAAAA;AAC9BU,IAAAA,cAAAA,CAAeF,OAAO,GAAGR,WAAAA;AACzB,IAAA,MAAMW,oBAAoBN,YAAAA,CAAOJ,cAAAA,CAAAA;AACjCU,IAAAA,iBAAAA,CAAkBH,OAAO,GAAGP,cAAAA;IAE5B,MAAMW,WAAAA,GAAcC,kBAAY,CAACC,IAAAA,GAAAA;AAC/BV,QAAAA,WAAAA,CAAYI,OAAO,EAAEO,UAAAA,EAAAA;AACrBT,QAAAA,OAAAA,CAAQE,OAAO,GAAGM,IAAAA;AAElB,QAAA,IAAI,CAACA,IAAAA,EAAM;AACT,YAAA;AACF,QAAA;AAEA,QAAA,MAAME,QAAAA,GAAW,IAAIC,oBAAAA,CAAqB,CAAC,CAACC,KAAAA,CAAM,GAAA;YAChD,IAAIA,KAAAA,CAAMC,cAAc,IAAIT,cAAAA,CAAeF,OAAO,IAAI,CAACG,iBAAAA,CAAkBH,OAAO,EAAE;AAChFC,gBAAAA,aAAAA,CAAcD,OAAO,EAAA;AACvB,YAAA;AACF,QAAA,CAAA,EAAGD,WAAWC,OAAO,CAAA;AAErBQ,QAAAA,QAAAA,CAASI,OAAO,CAACN,IAAAA,CAAAA;AACjBV,QAAAA,WAAAA,CAAYI,OAAO,GAAGQ,QAAAA;AACxB,IAAA,CAAA,EAAG,EAAE,CAAA;AAELK,IAAAA,eAAAA,CAAU,IAAM,IAAMjB,WAAAA,CAAYI,OAAO,EAAEO,cAAc,EAAE,CAAA;;;;;;IAO3DM,eAAAA,CAAU,IAAA;QACR,IAAIpB,cAAAA,IAAkB,CAACG,WAAAA,CAAYI,OAAO,IAAI,CAACF,OAAAA,CAAQE,OAAO,EAAE;AAC9D,YAAA;AACF,QAAA;AAEAJ,QAAAA,WAAAA,CAAYI,OAAO,CAACc,SAAS,CAAChB,QAAQE,OAAO,CAAA;AAC7CJ,QAAAA,WAAAA,CAAYI,OAAO,CAACY,OAAO,CAACd,QAAQE,OAAO,CAAA;IAC7C,CAAA,EAAG;AAACP,QAAAA;AAAe,KAAA,CAAA;IAEnB,OAAOW,WAAAA;AACT;;;;"}

package/dist/admin/future/pages/Assets/hooks/useInfiniteScrollSentinel.mjs

@@ -0,0 +1,73 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Infinite-scroll trigger for the media library list.
+ *
+ * Returns a callback ref to place on a sentinel element rendered after the last
+ * row. Three deliberate choices:
+ *
+ * 1. **Loading is driven only by fresh observer readings.** A fetch fires from
+ *    the `IntersectionObserver` callback — never from a state/prop change — so
+ *    it can't react to a stale `isIntersecting` from before newly loaded rows
+ *    rendered (which fetched an extra page on every trigger).
+ *
+ * 2. **Each settled page re-observes the sentinel.** An `IntersectionObserver`
+ *    only fires on a *transition*. When the sentinel stays on screen (a page
+ *    that doesn't fill the viewport — tall viewport, short page, grid fitting
+ *    the whole page) it would never fire again and loading would stall. So when
+ *    `isFetchingMore` settles back to false we re-observe, forcing a fresh
+ *    reading against the new layout: still on screen → load the next page;
+ *    viewport now filled → stop.
+ *
+ * 3. **A callback ref, not a stable object ref.** The sentinel only mounts once
+ *    the first page has rendered (the list shows a loader before that). A
+ *    callback ref (re)binds the observer exactly when the node mounts/unmounts,
+ *    so the observer can't miss a sentinel that appears after the hook first ran.
+ */ const useInfiniteScrollSentinel = ({ hasNextPage, isFetchingMore, onLoadMore, options })=>{
+    const observerRef = useRef(null);
+    const nodeRef = useRef(null);
+    // Read through refs so the callback ref stays stable and the observer callback
+    // always sees the latest values. `options` is read once at attach time (see
+    // its JSDoc); `onLoadMore` need not be stable.
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const onLoadMoreRef = useRef(onLoadMore);
+    onLoadMoreRef.current = onLoadMore;
+    const hasNextPageRef = useRef(hasNextPage);
+    hasNextPageRef.current = hasNextPage;
+    const isFetchingMoreRef = useRef(isFetchingMore);
+    isFetchingMoreRef.current = isFetchingMore;
+    const sentinelRef = useCallback((node)=>{
+        observerRef.current?.disconnect();
+        nodeRef.current = node;
+        if (!node) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry])=>{
+            if (entry.isIntersecting && hasNextPageRef.current && !isFetchingMoreRef.current) {
+                onLoadMoreRef.current();
+            }
+        }, optionsRef.current);
+        observer.observe(node);
+        observerRef.current = observer;
+    }, []);
+    useEffect(()=>()=>observerRef.current?.disconnect(), []);
+    // Once a page settles, re-observe so a *fresh* reading against the new layout
+    // decides whether to keep loading — rather than a stale `isIntersecting` from
+    // before the rows rendered. Re-observing re-emits the current intersection
+    // even without a transition, which is what keeps loading a viewport that a
+    // single page didn't fill.
+    useEffect(()=>{
+        if (isFetchingMore || !observerRef.current || !nodeRef.current) {
+            return;
+        }
+        observerRef.current.unobserve(nodeRef.current);
+        observerRef.current.observe(nodeRef.current);
+    }, [
+        isFetchingMore
+    ]);
+    return sentinelRef;
+};
+
+export { useInfiniteScrollSentinel };
+//# sourceMappingURL=useInfiniteScrollSentinel.mjs.map

package/dist/admin/future/pages/Assets/hooks/useInfiniteScrollSentinel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInfiniteScrollSentinel.mjs","sources":["../../../../../../admin/src/future/pages/Assets/hooks/useInfiniteScrollSentinel.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseInfiniteScrollSentinelArgs {\n  /** Whether there is a further page to request. */\n  hasNextPage: boolean;\n  /** Whether a subsequent page is already in flight. */\n  isFetchingMore: boolean;\n  /** Called to request the next page. Held in a ref, so it need not be stable. */\n  onLoadMore: () => void;\n  /**\n   * Passed to the `IntersectionObserver`. Read once, when the sentinel node\n   * attaches — changing it afterwards does NOT rebuild the observer, so a\n   * later `threshold`/`rootMargin` is silently ignored. Pass a stable, ideally\n   * module-level, object.\n   */\n  options?: IntersectionObserverInit;\n}\n\n/**\n * Infinite-scroll trigger for the media library list.\n *\n * Returns a callback ref to place on a sentinel element rendered after the last\n * row. Three deliberate choices:\n *\n * 1. **Loading is driven only by fresh observer readings.** A fetch fires from\n *    the `IntersectionObserver` callback — never from a state/prop change — so\n *    it can't react to a stale `isIntersecting` from before newly loaded rows\n *    rendered (which fetched an extra page on every trigger).\n *\n * 2. **Each settled page re-observes the sentinel.** An `IntersectionObserver`\n *    only fires on a *transition*. When the sentinel stays on screen (a page\n *    that doesn't fill the viewport — tall viewport, short page, grid fitting\n *    the whole page) it would never fire again and loading would stall. So when\n *    `isFetchingMore` settles back to false we re-observe, forcing a fresh\n *    reading against the new layout: still on screen → load the next page;\n *    viewport now filled → stop.\n *\n * 3. **A callback ref, not a stable object ref.** The sentinel only mounts once\n *    the first page has rendered (the list shows a loader before that). A\n *    callback ref (re)binds the observer exactly when the node mounts/unmounts,\n *    so the observer can't miss a sentinel that appears after the hook first ran.\n */\nexport const useInfiniteScrollSentinel = ({\n  hasNextPage,\n  isFetchingMore,\n  onLoadMore,\n  options,\n}: UseInfiniteScrollSentinelArgs) => {\n  const observerRef = useRef<IntersectionObserver | null>(null);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  // Read through refs so the callback ref stays stable and the observer callback\n  // always sees the latest values. `options` is read once at attach time (see\n  // its JSDoc); `onLoadMore` need not be stable.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const onLoadMoreRef = useRef(onLoadMore);\n  onLoadMoreRef.current = onLoadMore;\n  const hasNextPageRef = useRef(hasNextPage);\n  hasNextPageRef.current = hasNextPage;\n  const isFetchingMoreRef = useRef(isFetchingMore);\n  isFetchingMoreRef.current = isFetchingMore;\n\n  const sentinelRef = useCallback((node: HTMLElement | null) => {\n    observerRef.current?.disconnect();\n    nodeRef.current = node;\n\n    if (!node) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting && hasNextPageRef.current && !isFetchingMoreRef.current) {\n        onLoadMoreRef.current();\n      }\n    }, optionsRef.current);\n\n    observer.observe(node);\n    observerRef.current = observer;\n  }, []);\n\n  useEffect(() => () => observerRef.current?.disconnect(), []);\n\n  // Once a page settles, re-observe so a *fresh* reading against the new layout\n  // decides whether to keep loading — rather than a stale `isIntersecting` from\n  // before the rows rendered. Re-observing re-emits the current intersection\n  // even without a transition, which is what keeps loading a viewport that a\n  // single page didn't fill.\n  useEffect(() => {\n    if (isFetchingMore || !observerRef.current || !nodeRef.current) {\n      return;\n    }\n\n    observerRef.current.unobserve(nodeRef.current);\n    observerRef.current.observe(nodeRef.current);\n  }, [isFetchingMore]);\n\n  return sentinelRef;\n};\n"],"names":["useInfiniteScrollSentinel","hasNextPage","isFetchingMore","onLoadMore","options","observerRef","useRef","nodeRef","optionsRef","current","onLoadMoreRef","hasNextPageRef","isFetchingMoreRef","sentinelRef","useCallback","node","disconnect","observer","IntersectionObserver","entry","isIntersecting","observe","useEffect","unobserve"],"mappings":";;AAkBA;;;;;;;;;;;;;;;;;;;;;;;AAuBC,IACM,MAAMA,yBAAAA,GAA4B,CAAC,EACxCC,WAAW,EACXC,cAAc,EACdC,UAAU,EACVC,OAAO,EACuB,GAAA;AAC9B,IAAA,MAAMC,cAAcC,MAAAA,CAAoC,IAAA,CAAA;AACxD,IAAA,MAAMC,UAAUD,MAAAA,CAA2B,IAAA,CAAA;;;;AAK3C,IAAA,MAAME,aAAaF,MAAAA,CAAOF,OAAAA,CAAAA;AAC1BI,IAAAA,UAAAA,CAAWC,OAAO,GAAGL,OAAAA;AACrB,IAAA,MAAMM,gBAAgBJ,MAAAA,CAAOH,UAAAA,CAAAA;AAC7BO,IAAAA,aAAAA,CAAcD,OAAO,GAAGN,UAAAA;AACxB,IAAA,MAAMQ,iBAAiBL,MAAAA,CAAOL,WAAAA,CAAAA;AAC9BU,IAAAA,cAAAA,CAAeF,OAAO,GAAGR,WAAAA;AACzB,IAAA,MAAMW,oBAAoBN,MAAAA,CAAOJ,cAAAA,CAAAA;AACjCU,IAAAA,iBAAAA,CAAkBH,OAAO,GAAGP,cAAAA;IAE5B,MAAMW,WAAAA,GAAcC,YAAY,CAACC,IAAAA,GAAAA;AAC/BV,QAAAA,WAAAA,CAAYI,OAAO,EAAEO,UAAAA,EAAAA;AACrBT,QAAAA,OAAAA,CAAQE,OAAO,GAAGM,IAAAA;AAElB,QAAA,IAAI,CAACA,IAAAA,EAAM;AACT,YAAA;AACF,QAAA;AAEA,QAAA,MAAME,QAAAA,GAAW,IAAIC,oBAAAA,CAAqB,CAAC,CAACC,KAAAA,CAAM,GAAA;YAChD,IAAIA,KAAAA,CAAMC,cAAc,IAAIT,cAAAA,CAAeF,OAAO,IAAI,CAACG,iBAAAA,CAAkBH,OAAO,EAAE;AAChFC,gBAAAA,aAAAA,CAAcD,OAAO,EAAA;AACvB,YAAA;AACF,QAAA,CAAA,EAAGD,WAAWC,OAAO,CAAA;AAErBQ,QAAAA,QAAAA,CAASI,OAAO,CAACN,IAAAA,CAAAA;AACjBV,QAAAA,WAAAA,CAAYI,OAAO,GAAGQ,QAAAA;AACxB,IAAA,CAAA,EAAG,EAAE,CAAA;AAELK,IAAAA,SAAAA,CAAU,IAAM,IAAMjB,WAAAA,CAAYI,OAAO,EAAEO,cAAc,EAAE,CAAA;;;;;;IAO3DM,SAAAA,CAAU,IAAA;QACR,IAAIpB,cAAAA,IAAkB,CAACG,WAAAA,CAAYI,OAAO,IAAI,CAACF,OAAAA,CAAQE,OAAO,EAAE;AAC9D,YAAA;AACF,QAAA;AAEAJ,QAAAA,WAAAA,CAAYI,OAAO,CAACc,SAAS,CAAChB,QAAQE,OAAO,CAAA;AAC7CJ,QAAAA,WAAAA,CAAYI,OAAO,CAACY,OAAO,CAACd,QAAQE,OAAO,CAAA;IAC7C,CAAA,EAAG;AAACP,QAAAA;AAAe,KAAA,CAAA;IAEnB,OAAOW,WAAAA;AACT;;;;"}