@teleporthq/teleport-plugin-next-data-source 0.43.44 → 0.43.47

package/__tests__/refetch-loading-state.test.ts

@@ -0,0 +1,264 @@
+import * as types from '@babel/types'
+import generator from '@babel/generator'
+import {
+  ChunkType,
+  FileType,
+  ComponentStructure,
+  ChunkDefinition,
+} from '@teleporthq/teleport-types'
+import { createNextArrayMapperPaginationPlugin } from '../src/pagination-plugin'
+
+// A `<DataProvider>` shaped like the one `generateDataSourceNode` emits for an
+// array mapper: a `renderSuccess` holding a `Repeater` (that is what marks it as
+// an array-mapper provider) and, when the mapper has a loading state designed,
+// a `renderLoading` slot.
+const makeDataProviderJSX = (options: { withLoadingSlot: boolean }): types.JSXElement => {
+  const repeater = types.jsxElement(
+    types.jsxOpeningElement(
+      types.jsxIdentifier('Repeater'),
+      [
+        types.jsxAttribute(
+          types.jsxIdentifier('renderItem'),
+          types.jsxExpressionContainer(
+            types.arrowFunctionExpression(
+              [types.identifier('product'), types.identifier('index')],
+              types.jsxElement(
+                types.jsxOpeningElement(types.jsxIdentifier('div'), [], true),
+                null,
+                [],
+                true
+              )
+            )
+          )
+        ),
+      ],
+      true
+    ),
+    null,
+    [],
+    true
+  )
+
+  const attributes: types.JSXAttribute[] = [
+    types.jsxAttribute(
+      types.jsxIdentifier('name'),
+      types.jsxExpressionContainer(types.stringLiteral('items'))
+    ),
+    types.jsxAttribute(
+      types.jsxIdentifier('renderSuccess'),
+      types.jsxExpressionContainer(
+        types.arrowFunctionExpression([types.identifier('items')], repeater)
+      )
+    ),
+  ]
+
+  if (options.withLoadingSlot) {
+    attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier('renderLoading'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [],
+            types.jsxElement(
+              types.jsxOpeningElement(types.jsxIdentifier('p'), [], true),
+              null,
+              [],
+              true
+            )
+          )
+        )
+      )
+    )
+  }
+
+  return types.jsxElement(
+    types.jsxOpeningElement(types.jsxIdentifier('DataProvider'), attributes, true),
+    null,
+    [],
+    true
+  )
+}
+
+const makeComponentChunk = (dataProvider: types.JSXElement): ChunkDefinition => {
+  const body = types.blockStatement([types.returnStatement(dataProvider)])
+  const arrow = types.arrowFunctionExpression([types.identifier('props')], body)
+  const declaration = types.variableDeclaration('const', [
+    types.variableDeclarator(types.identifier('ProductsList'), arrow),
+  ])
+  return {
+    name: 'jsx-component',
+    type: ChunkType.AST,
+    fileType: FileType.JS,
+    linkAfter: [],
+    content: declaration,
+    meta: {},
+  }
+}
+
+// A `data-source-list > cms-list-repeater` UIDL. `category` decides which
+// DataProvider updater runs, so every one of them is covered below.
+const makeUidlNode = (
+  category: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
+  // tslint:disable-next-line:no-any
+): any => ({
+  type: 'data-source-list',
+  content: {
+    renderPropIdentifier: 'items',
+    resourceDefinition: {
+      dataSourceId: 'ds1',
+      tableName: 'products',
+      dataSourceType: 'postgresql',
+    },
+    resource: { params: { queryColumns: { content: ['name'] } } },
+    nodes: {
+      success: {
+        type: 'cms-list-repeater',
+        content: {
+          renderPropIdentifier: 'product',
+          paginated: category === 'paginated+search' || category === 'paginated-only',
+          perPage: 20,
+          searchEnabled: category === 'paginated+search' || category === 'search-only',
+          searchDebounce: 300,
+          nodes: { list: { type: 'element', content: { elementType: 'div' } } },
+        },
+      },
+    },
+  },
+})
+
+const runPlugin = async (options: {
+  category?: 'paginated+search' | 'paginated-only' | 'search-only' | 'plain'
+  withLoadingSlot?: boolean
+}): Promise<string> => {
+  const dataProvider = makeDataProviderJSX({ withLoadingSlot: options.withLoadingSlot !== false })
+  const chunk = makeComponentChunk(dataProvider)
+  const structure: ComponentStructure = {
+    uidl: { name: 'ProductsList', node: makeUidlNode(options.category || 'paginated+search') },
+    chunks: [chunk],
+    dependencies: {},
+    options: { dataSources: {}, extractedResources: {} },
+  } as never
+  const plugin = createNextArrayMapperPaginationPlugin()
+  await plugin(structure)
+  return generator(chunk.content as types.Node).code
+}
+
+describe('pagination plugin — refetch loading state', () => {
+  it('declares the in-flight tracking hooks and drives persistDataDuringLoading from them', async () => {
+    const code = await runPlugin({})
+
+    // The state definition that displays the loading state, plus the counter
+    // that keeps it honest across overlapping requests.
+    expect(code).toContain('const ds_0_fetchesInFlight = useRef(0)')
+    expect(code).toContain('const [ds_0_isFetching, setDs_0_isFetching] = useState(false)')
+
+    // While a fetch is in flight the provider stops persisting the previous rows
+    // and falls through to its renderLoading slot.
+    expect(code).toContain('persistDataDuringLoading={!ds_0_isFetching}')
+    expect(code).not.toContain('persistDataDuringLoading={true}')
+  })
+
+  it('raises the flag when the request starts and lowers it once it settles', async () => {
+    const code = await runPlugin({})
+
+    // Raised synchronously, before the request is issued, so the flip is batched
+    // with the provider's own switch to its loading status (no intermediate paint).
+    expect(code).toMatch(
+      /ds_0_fetchesInFlight\.current \+= 1;?\s*setDs_0_isFetching\(true\);?\s*return fetch\(/
+    )
+
+    // Lowered in `finally`, so a rejected request cannot leave it stuck on.
+    expect(code).toContain('.finally(() => {')
+    expect(code).toContain('ds_0_fetchesInFlight.current -= 1')
+    expect(code).toContain('setDs_0_isFetching(false)')
+
+    // Only the LAST outstanding request lowers the flag, and the counter is
+    // clamped so a late settle from a remounted provider cannot drive it negative.
+    expect(code).toContain('if (ds_0_fetchesInFlight.current <= 0)')
+    expect(code).toContain('ds_0_fetchesInFlight.current = 0')
+  })
+
+  it('keeps fetchData referentially stable so the provider does not refetch in a loop', async () => {
+    const code = await runPlugin({})
+
+    // The wrapped callback only closes over a ref object and a setState setter,
+    // both stable across renders — the empty dependency array stays correct.
+    expect(code).toMatch(/fetchData=\{useCallback\(params => \{[\s\S]*?\}, \[\]\)\}/)
+  })
+
+  it.each([
+    ['paginated+search' as const],
+    ['paginated-only' as const],
+    ['search-only' as const],
+    ['plain' as const],
+  ])('wires the loading state for the %s data source category', async (category) => {
+    const code = await runPlugin({ category })
+
+    expect(code).toContain('const [ds_0_isFetching, setDs_0_isFetching] = useState(false)')
+    expect(code).toContain('persistDataDuringLoading={!ds_0_isFetching}')
+    expect(code).toContain('setDs_0_isFetching(true)')
+  })
+
+  it('is idempotent — a second pass does not double-wrap fetchData', async () => {
+    const dataProvider = makeDataProviderJSX({ withLoadingSlot: true })
+    const chunk = makeComponentChunk(dataProvider)
+    const structure: ComponentStructure = {
+      uidl: { name: 'ProductsList', node: makeUidlNode('paginated+search') },
+      chunks: [chunk],
+      dependencies: {},
+      options: { dataSources: {}, extractedResources: {} },
+    } as never
+    const plugin = createNextArrayMapperPaginationPlugin()
+
+    await plugin(structure)
+    await plugin(structure)
+
+    const code = generator(chunk.content as types.Node).code
+    expect((code.match(/setDs_0_isFetching\(true\)/g) || []).length).toBe(1)
+    expect((code.match(/ds_0_fetchesInFlight\.current \+= 1/g) || []).length).toBe(1)
+  })
+
+  it('leaves an unmemoized fetchData alone rather than building a refetch loop', async () => {
+    // A `fetchData` that is re-created on every render already refetches on
+    // every render (DataProvider keys its effect on the fetcher identity);
+    // adding a setState to it would make that loop self-sustaining. Such a
+    // provider is skipped entirely.
+    const dataProvider = makeDataProviderJSX({ withLoadingSlot: true })
+    dataProvider.openingElement.attributes.push(
+      types.jsxAttribute(
+        types.jsxIdentifier('fetchData'),
+        types.jsxExpressionContainer(
+          types.arrowFunctionExpression(
+            [types.identifier('params')],
+            types.callExpression(types.identifier('fetch'), [types.stringLiteral('/api/items')])
+          )
+        )
+      )
+    )
+    const chunk = makeComponentChunk(dataProvider)
+    const structure: ComponentStructure = {
+      // `plain` is the only category whose updater keeps an existing fetchData
+      // instead of replacing it with the memoized one.
+      uidl: { name: 'ProductsList', node: makeUidlNode('plain') },
+      chunks: [chunk],
+      dependencies: {},
+      options: { dataSources: {}, extractedResources: {} },
+    } as never
+    await createNextArrayMapperPaginationPlugin()(structure)
+
+    const code = generator(chunk.content as types.Node).code
+    expect(code).not.toContain('ds_0_isFetching')
+    expect(code).not.toContain('ds_0_fetchesInFlight')
+  })
+
+  it('leaves a provider without a designed loading state untouched', async () => {
+    // With no renderLoading slot, dropping persistDataDuringLoading would blank
+    // the list out mid-refetch instead of showing something — keeping the
+    // previous rows is the better of the two, so nothing is wired.
+    const code = await runPlugin({ withLoadingSlot: false })
+
+    expect(code).not.toContain('ds_0_isFetching')
+    expect(code).not.toContain('ds_0_fetchesInFlight')
+    expect(code).toContain('persistDataDuringLoading={true}')
+  })
+})

package/dist/cjs/loading-state.d.ts

@@ -0,0 +1,92 @@
+import * as types from '@babel/types';
+/**
+ * ------------------------------------------------------------------
+ * Refetch loading state for array-mapper `DataProvider`s
+ * ------------------------------------------------------------------
+ *
+ * `DataProvider` (from `@teleporthq/react-components`) renders its LOADING
+ * slot only when it has no data to show:
+ *
+ *   case "idle":
+ *   case "loading":
+ *     return props.persistDataDuringLoading && data
+ *       ? renderSuccess(data, true)
+ *       : renderLoading()
+ *
+ * Every generated array-mapper list ships `persistDataDuringLoading={true}`,
+ * and that flag is load-bearing on the FIRST paint: when the page prefetches
+ * rows in `getStaticProps` and hands them over as `initialData`, the provider
+ * deliberately skips its first client fetch and therefore never leaves the
+ * `idle` status. Without the flag that page would render the loading slot
+ * forever instead of the prefetched rows.
+ *
+ * The side effect is that once the provider owns data, EVERY later refetch is
+ * invisible: changing the category filter, the sort order or the search term
+ * re-runs the query while the stale rows stay on screen, so the buyer gets no
+ * feedback until the new rows pop in. (Page changes and search changes also
+ * remount the provider through its `key`, which resets `data` — but a filter
+ * or sort change keeps the same key, so nothing at all happens visually.)
+ *
+ * The provider does pass an `isLoading` flag as the second argument of
+ * `renderSuccess`, but it is `true` for the `idle` status as well — i.e.
+ * permanently true on any page that skipped its first fetch because it had
+ * `initialData` — so it cannot be used to decide what to paint.
+ *
+ * Fix: track the in-flight fetches of each data source in the PAGE component
+ * and hand `persistDataDuringLoading` the negated flag. `fetchData` is the one
+ * function the generator owns and the provider calls exactly once per fetch, so
+ * it is where the flag is raised (`true` when the request starts) and lowered
+ * (`false` once it settles, success or failure). While a refetch is in flight
+ * `persistDataDuringLoading` is `false`, so the provider falls through to
+ * `renderLoading()` and the array mapper's designed loading state shows; when
+ * the request settles the flag drops back to `true` and the rows return.
+ *
+ * Why not branch inside `renderSuccess` instead: the loading JSX would have to
+ * be duplicated into the success render prop, and `styled-jsx` only scopes JSX
+ * that lives inside the component's returned tree — every workaround that
+ * hoists the loading markup into a shared local helper silently loses its
+ * `jsx-<hash>` class and therefore all of its styles.
+ *
+ * Nothing changes for a provider that is idle or mounting: `isFetching` starts
+ * at `false`, so the server render and the first client render are identical
+ * (no hydration mismatch) and the `initialData` fast path is untouched.
+ */
+export interface LoadingStateVars {
+    /** Boolean state: `true` while at least one fetch for this data source is in flight. */
+    isFetchingVar: string;
+    /** Setter for `isFetchingVar`. */
+    setIsFetchingVar: string;
+    /**
+     * Ref holding the number of fetches currently in flight. A boolean alone is
+     * not enough: two controls changed in quick succession (e.g. category then
+     * sort) start two overlapping requests, and the first one to settle would
+     * otherwise lower the flag while the second is still running — flashing the
+     * stale rows back for the rest of the second request.
+     */
+    inFlightRefVar: string;
+}
+export declare function getLoadingStateVars(index: number): LoadingStateVars;
+/**
+ * `const ds_N_fetchesInFlight = useRef(0)`
+ * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
+ *
+ * Both are stable across renders (a ref object and a `useState` setter), which
+ * is what lets the wrapped `fetchData` keep its empty `useCallback` dependency
+ * array — a changing `fetchData` identity would retrigger the provider's fetch
+ * effect on every render.
+ */
+export declare function buildLoadingStateDeclarations(vars: LoadingStateVars): types.Statement[];
+/**
+ * Wires the refetch loading state into a single `DataProvider` JSX element.
+ *
+ * No-ops (returning `false`, so the caller emits no state declarations) when
+ * the provider cannot benefit from it:
+ *   - no `renderLoading` slot — the array mapper has no loading state designed,
+ *     so falling through to it would blank the list out instead of showing
+ *     something; keeping the stale rows is the better of the two.
+ *   - `fetchData` missing, not memoized, or not an expression-bodied promise
+ *     chain — see `findMemoizedFetchDataArrow`.
+ *   - already wired — keeps a second pass over the same AST idempotent.
+ */
+export declare function applyLoadingStateToDataProvider(dataProvider: any, vars: LoadingStateVars): boolean;
+//# sourceMappingURL=loading-state.d.ts.map

package/dist/cjs/loading-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-state.d.ts","sourceRoot":"","sources":["../../src/loading-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,wFAAwF;IACxF,aAAa,EAAE,MAAM,CAAA;IACrB,kCAAkC;IAClC,gBAAgB,EAAE,MAAM,CAAA;IACxB;;;;;;OAMG;IACH,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAMnE;AAED;;;;;;;;GAQG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,EAAE,CAkBvF;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,+BAA+B,CAE7C,YAAY,EAAE,GAAG,EACjB,IAAI,EAAE,gBAAgB,GACrB,OAAO,CAyBT"}

package/dist/cjs/loading-state.js

@@ -0,0 +1,186 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyLoadingStateToDataProvider = exports.buildLoadingStateDeclarations = exports.getLoadingStateVars = void 0;
+var types = __importStar(require("@babel/types"));
+function getLoadingStateVars(index) {
+    return {
+        isFetchingVar: "ds_".concat(index, "_isFetching"),
+        setIsFetchingVar: "setDs_".concat(index, "_isFetching"),
+        inFlightRefVar: "ds_".concat(index, "_fetchesInFlight"),
+    };
+}
+exports.getLoadingStateVars = getLoadingStateVars;
+/**
+ * `const ds_N_fetchesInFlight = useRef(0)`
+ * `const [ds_N_isFetching, setDs_N_isFetching] = useState(false)`
+ *
+ * Both are stable across renders (a ref object and a `useState` setter), which
+ * is what lets the wrapped `fetchData` keep its empty `useCallback` dependency
+ * array — a changing `fetchData` identity would retrigger the provider's fetch
+ * effect on every render.
+ */
+function buildLoadingStateDeclarations(vars) {
+    return [
+        types.variableDeclaration('const', [
+            types.variableDeclarator(types.identifier(vars.inFlightRefVar), types.callExpression(types.identifier('useRef'), [types.numericLiteral(0)])),
+        ]),
+        types.variableDeclaration('const', [
+            types.variableDeclarator(types.arrayPattern([
+                types.identifier(vars.isFetchingVar),
+                types.identifier(vars.setIsFetchingVar),
+            ]), types.callExpression(types.identifier('useState'), [types.booleanLiteral(false)])),
+        ]),
+    ];
+}
+exports.buildLoadingStateDeclarations = buildLoadingStateDeclarations;
+/**
+ * Wires the refetch loading state into a single `DataProvider` JSX element.
+ *
+ * No-ops (returning `false`, so the caller emits no state declarations) when
+ * the provider cannot benefit from it:
+ *   - no `renderLoading` slot — the array mapper has no loading state designed,
+ *     so falling through to it would blank the list out instead of showing
+ *     something; keeping the stale rows is the better of the two.
+ *   - `fetchData` missing, not memoized, or not an expression-bodied promise
+ *     chain — see `findMemoizedFetchDataArrow`.
+ *   - already wired — keeps a second pass over the same AST idempotent.
+ */
+function applyLoadingStateToDataProvider(
+// tslint:disable-next-line:no-any
+dataProvider, vars) {
+    var _a;
+    var attributes = (_a = dataProvider === null || dataProvider === void 0 ? void 0 : dataProvider.openingElement) === null || _a === void 0 ? void 0 : _a.attributes;
+    if (!Array.isArray(attributes)) {
+        return false;
+    }
+    if (!findAttribute(attributes, 'renderLoading')) {
+        return false;
+    }
+    var fetchDataAttr = findAttribute(attributes, 'fetchData');
+    if (!fetchDataAttr) {
+        return false;
+    }
+    var fetchArrow = findMemoizedFetchDataArrow(fetchDataAttr);
+    if (!fetchArrow || fetchArrow.body.type !== 'CallExpression') {
+        return false;
+    }
+    fetchArrow.body = buildTrackedFetchBody(fetchArrow.body, vars);
+    setPersistDataDuringLoading(attributes, vars);
+    return true;
+}
+exports.applyLoadingStateToDataProvider = applyLoadingStateToDataProvider;
+// tslint:disable-next-line:no-any
+function findAttribute(attributes, name) {
+    return attributes.find(
+    // tslint:disable-next-line:no-any
+    function (attr) { var _a; return (attr === null || attr === void 0 ? void 0 : attr.type) === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === name; });
+}
+/**
+ * The `useCallback(fn, [])`-wrapped arrow behind a `fetchData` attribute, or
+ * `undefined` when the value has any other shape.
+ *
+ * Requiring the memoized form is a safety condition, not a convenience.
+ * `DataProvider` refetches whenever the `fetchData` identity changes
+ * (`useEffect(..., [params, fetchData])`), so wrapping a fetcher that is
+ * re-created on every render with something that sets state would build a
+ * self-sustaining loop: fetch → setState → render → new fetcher identity →
+ * fetch. The array-mapper providers this plugin owns are always memoized; the
+ * few unmemoized `fetchData` values other plugins emit are left exactly as they
+ * are today.
+ */
+function findMemoizedFetchDataArrow(attribute) {
+    var _a;
+    var value = attribute.value;
+    if (!value || value.type !== 'JSXExpressionContainer') {
+        return undefined;
+    }
+    var expression = value.expression;
+    if (expression.type !== 'CallExpression' ||
+        expression.callee.type !== 'Identifier' ||
+        expression.callee.name !== 'useCallback' ||
+        ((_a = expression.arguments[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'ArrowFunctionExpression') {
+        return undefined;
+    }
+    return expression.arguments[0];
+}
+/**
+ * Turns `(params) => fetch(...).then(...)` into
+ *
+ *   (params) => {
+ *     ds_N_fetchesInFlight.current += 1
+ *     setDs_N_isFetching(true)
+ *     return fetch(...).then(...).finally(() => {
+ *       ds_N_fetchesInFlight.current -= 1
+ *       if (ds_N_fetchesInFlight.current <= 0) {
+ *         ds_N_fetchesInFlight.current = 0
+ *         setDs_N_isFetching(false)
+ *       }
+ *     })
+ *   }
+ *
+ * `finally` (rather than a `then` pair) keeps the flag honest when the request
+ * rejects: the provider switches to its error status and the loading state must
+ * not stay on screen. The counter is clamped at 0 so a late settle from a
+ * provider instance that was remounted through its `key` can never drive it
+ * negative and wedge the flag on.
+ *
+ * `fetchExpression` is the `fetch(...).then(...).then(...)` chain the generator
+ * emitted, so `.finally` is always available on it — the caller only reaches
+ * here for a call-expression body.
+ */
+function buildTrackedFetchBody(fetchExpression, vars) {
+    var inFlightCount = types.memberExpression(types.identifier(vars.inFlightRefVar), types.identifier('current'));
+    var settleHandler = types.arrowFunctionExpression([], types.blockStatement([
+        types.expressionStatement(types.assignmentExpression('-=', types.cloneNode(inFlightCount, true), types.numericLiteral(1))),
+        types.ifStatement(types.binaryExpression('<=', types.cloneNode(inFlightCount, true), types.numericLiteral(0)), types.blockStatement([
+            types.expressionStatement(types.assignmentExpression('=', types.cloneNode(inFlightCount, true), types.numericLiteral(0))),
+            types.expressionStatement(types.callExpression(types.identifier(vars.setIsFetchingVar), [
+                types.booleanLiteral(false),
+            ])),
+        ])),
+    ]));
+    return types.blockStatement([
+        types.expressionStatement(types.assignmentExpression('+=', types.cloneNode(inFlightCount, true), types.numericLiteral(1))),
+        types.expressionStatement(types.callExpression(types.identifier(vars.setIsFetchingVar), [types.booleanLiteral(true)])),
+        types.returnStatement(types.callExpression(types.memberExpression(fetchExpression, types.identifier('finally')), [
+            settleHandler,
+        ])),
+    ]);
+}
+/** `persistDataDuringLoading={!ds_N_isFetching}`, replacing any existing value. */
+// tslint:disable-next-line:no-any
+function setPersistDataDuringLoading(attributes, vars) {
+    var attribute = types.jsxAttribute(types.jsxIdentifier('persistDataDuringLoading'), types.jsxExpressionContainer(types.unaryExpression('!', types.identifier(vars.isFetchingVar), true)));
+    var existingIndex = attributes.findIndex(
+    // tslint:disable-next-line:no-any
+    function (attr) { var _a; return (attr === null || attr === void 0 ? void 0 : attr.type) === 'JSXAttribute' && ((_a = attr.name) === null || _a === void 0 ? void 0 : _a.name) === 'persistDataDuringLoading'; });
+    if (existingIndex === -1) {
+        attributes.push(attribute);
+        return;
+    }
+    attributes[existingIndex] = attribute;
+}
+//# sourceMappingURL=loading-state.js.map

package/dist/cjs/loading-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-state.js","sourceRoot":"","sources":["../../src/loading-state.ts"],"names":[],"mappings":"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"}

package/dist/cjs/pagination-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,4BAA4B,CAAA;AA0tBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CAq2B5E,CAAA"}
+{"version":3,"file":"pagination-plugin.d.ts","sourceRoot":"","sources":["../../src/pagination-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,sBAAsB,EAIvB,MAAM,4BAA4B,CAAA;AA+tBnC,eAAO,MAAM,qCAAqC,EAAE,sBAAsB,CAAC,EAAE,CAy3B5E,CAAA"}

package/dist/cjs/pagination-plugin.js

@@ -69,6 +69,7 @@ var utils_1 = require("./utils");
 var data_source_fetchers_1 = require("./data-source-fetchers");
 var sort_utils_1 = require("./sort-utils");
 var filter_utils_1 = require("./filter-utils");
+var loading_state_1 = require("./loading-state");
 // tslint:disable-next-line:no-any
 function parseSearchDefaultValue(raw) {
     if (!raw || typeof raw !== 'object') {
@@ -577,7 +578,7 @@ function pushSearchUrlSyncEffects(effectStatements, usage, vars) {
 // ==================== MAIN PLUGIN ====================
 var createNextArrayMapperPaginationPlugin = function () {
     var paginationPlugin = function (structure) { return __awaiter(void 0, void 0, void 0, function () {
-        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
+        var uidl, chunks, dependencies, options, componentChunk, variableDeclaration, declarator, arrowFunction, blockStatement, registry, getStaticPropsChunk, isPage, stateDeclarations, effectStatements, needsUseRouter, hasRouterDecl, returnIndex, insertIndex, dataProviders, dataProvidersWithRepeaters, usageIndexByDataSourceId, loadingStateDeclarations, dataProvidersWithoutRepeaters, searchInputs, searchEnabledUsages, paginationNodes, paginatedUsages;
         var _a;
         return __generator(this, function (_b) {
             uidl = structure.uidl, chunks = structure.chunks, dependencies = structure.dependencies, options = structure.options;
@@ -940,6 +941,7 @@ var createNextArrayMapperPaginationPlugin = function () {
                 return hasRepeater;
             });
             usageIndexByDataSourceId = new Map();
+            loadingStateDeclarations = [];
             dataProvidersWithRepeaters.forEach(function (dp) {
                 var _a, _b, _c;
                 var nameAttr = dp.openingElement.attributes.find(function (attr) { return attr.type === 'JSXAttribute' && attr.name.name === 'name'; });
@@ -970,9 +972,21 @@ var createNextArrayMapperPaginationPlugin = function () {
                 else if (usage.category === 'plain') {
                     updateDataProviderForPlain(dp, fileName, usage);
                 }
+                // Show the array mapper's loading state while a category/sort/search
+                // change refetches, instead of leaving the previous rows on screen with
+                // no feedback. Runs last so it sees the `fetchData` and
+                // `persistDataDuringLoading` attributes the updaters above just wrote.
+                var loadingVars = (0, loading_state_1.getLoadingStateVars)(usage.index);
+                if ((0, loading_state_1.applyLoadingStateToDataProvider)(dp, loadingVars)) {
+                    loadingStateDeclarations.push.apply(loadingStateDeclarations, (0, loading_state_1.buildLoadingStateDeclarations)(loadingVars));
+                }
                 // Create API route for all categories (including 'plain' for components)
                 ensureAPIRouteExists(options.extractedResources, usage, options.dataSources, (_c = options.ecommerceSettings) === null || _c === void 0 ? void 0 : _c.categories);
             });
+            // Declare the loading-state hooks alongside the other data-source state, at
+            // the top of the component body. Unconditional and in a fixed order, so the
+            // hook order stays stable across renders.
+            loadingStateDeclarations.reverse().forEach(function (s) { return blockStatement.body.unshift(s); });
             dataProvidersWithoutRepeaters = dataProviders.filter(function (dp) {
                 var hasRepeater = findArrayMapperRenderPropInDataProvider(dp) !== undefined;
                 return !hasRepeater;