From 04af34e76d6f7a1539e8727c10dee100a81b4580 Mon Sep 17 00:00:00 2001
From: shaoyu <shaoyu>
Date: Tue, 17 Sep 2024 14:19:38 -0700
Subject: [PATCH] fix more cases that should use ispending

---
 docs/List.md                                         |  4 ++--
 docs/useListController.md                            |  4 ++--
 examples/simple/src/customRouteNoLayout.tsx          |  4 ++--
 .../controller/field/ReferenceFieldBase.stories.tsx  |  2 +-
 .../controller/input/ReferenceInputBase.stories.tsx  |  4 ++--
 packages/ra-core/src/controller/list/useList.ts      |  4 ++--
 packages/ra-ui-materialui/src/list/List.spec.tsx     | 12 ++++++------
 packages/ra-ui-materialui/src/list/List.stories.tsx  |  4 ++--
 .../src/list/datagrid/Datagrid.stories.tsx           |  8 ++++----
 9 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index fd16dd7b732..28fe33dbad7 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -1167,8 +1167,8 @@ This is often used by APIs to return facets, aggregations, statistics, or other
 //     },
 // }
 const Facets = () => {
-    const { isLoading, error, meta } = useListContext();
-    if (isLoading || error) return null;
+    const { isPending, error, meta } = useListContext();
+    if (isPending || error) return null;
     return (
         <Box>
             <Typography variant="subtitle2">
diff --git a/docs/useListController.md b/docs/useListController.md
index c88131817a5..3f55e8b416f 100644
--- a/docs/useListController.md
+++ b/docs/useListController.md
@@ -270,7 +270,7 @@ import { useState } from 'react';
 import { useListController } from 'react-admin';
 
 const OfficeList = () => {
-    const { filterValues, setFilters, data, isLoading } = useListController({ resource: 'offices' });
+    const { filterValues, setFilters, data, isPending } = useListController({ resource: 'offices' });
     const [formValues, setFormValues] = useState(filterValues);
 
     const handleChange = (event) => {
@@ -285,7 +285,7 @@ const OfficeList = () => {
         setFilters(filterFormValues);
     };
 
-    if (isLoading) return <div>Loading...</div>;
+    if (isPending) return <div>Loading...</div>;
 
     return (
         <>
diff --git a/examples/simple/src/customRouteNoLayout.tsx b/examples/simple/src/customRouteNoLayout.tsx
index 9ac77f11ced..9e88657d6d5 100644
--- a/examples/simple/src/customRouteNoLayout.tsx
+++ b/examples/simple/src/customRouteNoLayout.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useGetList } from 'react-admin';
 
 const CustomRouteNoLayout = ({ title = 'Posts' }) => {
-    const { isLoading, total } = useGetList('posts', {
+    const { isPending, total } = useGetList('posts', {
         pagination: { page: 0, perPage: 10 },
         sort: { field: 'id', order: 'ASC' },
     });
@@ -10,7 +10,7 @@ const CustomRouteNoLayout = ({ title = 'Posts' }) => {
     return (
         <div>
             <h1>{title}</h1>
-            {isLoading ? (
+            {isPending ? (
                 <p className="app-loader">Loading...</p>
             ) : (
                 <p>
diff --git a/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx b/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
index afc274630a2..fc2a64f798a 100644
--- a/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
+++ b/packages/ra-core/src/controller/field/ReferenceFieldBase.stories.tsx
@@ -354,7 +354,7 @@ export const Meta = ({
 const MyReferenceField = (props: { children: React.ReactNode }) => {
     const context = useReferenceFieldContext();
 
-    if (context.isLoading) {
+    if (context.isPending) {
         return <p>Loading...</p>;
     }
 
diff --git a/packages/ra-core/src/controller/input/ReferenceInputBase.stories.tsx b/packages/ra-core/src/controller/input/ReferenceInputBase.stories.tsx
index 5840b695253..bd9bf5b2942 100644
--- a/packages/ra-core/src/controller/input/ReferenceInputBase.stories.tsx
+++ b/packages/ra-core/src/controller/input/ReferenceInputBase.stories.tsx
@@ -136,7 +136,7 @@ const SelectInput = (
         Partial<Pick<InputProps, 'source'>> &
         ChoicesProps & { source?: string }
 ) => {
-    const { allChoices, error, isLoading, source } = useChoicesContext(props);
+    const { allChoices, error, isPending, source } = useChoicesContext(props);
     const { getChoiceValue, getChoiceText } = useChoices(props);
     const { field } = useInput({ ...props, source });
 
@@ -147,7 +147,7 @@ const SelectInput = (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
             <label htmlFor={field.name}>{props.label || field.name}</label>
             <select id={field.name} {...field}>
-                {isLoading && <option value="">Loading...</option>}
+                {isPending && <option value="">Loading...</option>}
                 {allChoices.map(choice => (
                     <option
                         key={getChoiceValue(choice)}
diff --git a/packages/ra-core/src/controller/list/useList.ts b/packages/ra-core/src/controller/list/useList.ts
index cb0aac12ca7..4212f20656f 100644
--- a/packages/ra-core/src/controller/list/useList.ts
+++ b/packages/ra-core/src/controller/list/useList.ts
@@ -170,7 +170,7 @@ export const useList = <RecordType extends RaRecord = any>(
     // We do all the data processing (filtering, sorting, paginating) client-side
     useEffect(
         () => {
-            if (isLoading || !data) return;
+            if (isPending || !data) return;
             let tempData = data;
 
             // 1. filter
@@ -236,7 +236,7 @@ export const useList = <RecordType extends RaRecord = any>(
             // eslint-disable-next-line react-hooks/exhaustive-deps
             JSON.stringify(data),
             filterValues,
-            isLoading,
+            isPending,
             page,
             perPage,
             setFinalItems,
diff --git a/packages/ra-ui-materialui/src/list/List.spec.tsx b/packages/ra-ui-materialui/src/list/List.spec.tsx
index a4d78f6d3e1..244381d1784 100644
--- a/packages/ra-ui-materialui/src/list/List.spec.tsx
+++ b/packages/ra-ui-materialui/src/list/List.spec.tsx
@@ -106,8 +106,8 @@ describe('<List />', () => {
 
     it('should render an invite when the list is empty', async () => {
         const Dummy = () => {
-            const { isLoading } = useListContext();
-            return <div>{isLoading ? 'loading' : 'dummy'}</div>;
+            const { isPending } = useListContext();
+            return <div>{isPending ? 'loading' : 'dummy'}</div>;
         };
         const dataProvider = {
             getList: jest.fn(() => Promise.resolve({ data: [], total: 0 })),
@@ -129,8 +129,8 @@ describe('<List />', () => {
 
     it('should not render an invite when the list is empty with an empty prop set to false', async () => {
         const Dummy = () => {
-            const { isLoading } = useListContext();
-            return <div>{isLoading ? 'loading' : 'dummy'}</div>;
+            const { isPending } = useListContext();
+            return <div>{isPending ? 'loading' : 'dummy'}</div>;
         };
         const dataProvider = {
             getList: jest.fn(() => Promise.resolve({ data: [], total: 0 })),
@@ -179,8 +179,8 @@ describe('<List />', () => {
 
     it('should not render an invite when a filter is active', async () => {
         const Dummy = () => {
-            const { isLoading } = useListContext();
-            return <div>{isLoading ? 'loading' : 'dummy'}</div>;
+            const { isPending } = useListContext();
+            return <div>{isPending ? 'loading' : 'dummy'}</div>;
         };
         const dataProvider = {
             getList: jest.fn(() => Promise.resolve({ data: [], total: 0 })),
diff --git a/packages/ra-ui-materialui/src/list/List.stories.tsx b/packages/ra-ui-materialui/src/list/List.stories.tsx
index f1e7b0d2ec2..38a13aa0f96 100644
--- a/packages/ra-ui-materialui/src/list/List.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/List.stories.tsx
@@ -626,8 +626,8 @@ export const ErrorInFetch = () => (
 );
 
 const Facets = () => {
-    const { isLoading, error, meta } = useListContext();
-    if (isLoading || error) return null;
+    const { isPending, error, meta } = useListContext();
+    if (isPending || error) return null;
     return (
         <Box order={-1} width={200} mt={7}>
             <Typography variant="subtitle2" gutterBottom>
diff --git a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
index a94ddfdd544..ff296f7711a 100644
--- a/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
+++ b/packages/ra-ui-materialui/src/list/datagrid/Datagrid.stories.tsx
@@ -334,7 +334,7 @@ export const ColumnStyles = () => (
 const sort = { field: 'id', order: 'DESC' } as SortPayload;
 
 const MyCustomList = () => {
-    const { data, total, isLoading } = useGetList('books', {
+    const { data, total, isPending } = useGetList('books', {
         pagination: { page: 1, perPage: 10 },
         sort: sort,
     });
@@ -343,7 +343,7 @@ const MyCustomList = () => {
         <Datagrid
             data={data}
             total={total}
-            isLoading={isLoading}
+            isPending={isPending}
             sort={sort}
             bulkActionButtons={false}
         >
@@ -354,11 +354,11 @@ const MyCustomList = () => {
 };
 
 const MyCustomListInteractive = () => {
-    const { data, isLoading } = useGetList('books', {
+    const { data, isPending } = useGetList('books', {
         pagination: { page: 1, perPage: 10 },
         sort,
     });
-    const listContext = useList({ data, isLoading });
+    const listContext = useList({ data, isPending });
 
     return (
         <ListContextProvider value={listContext}>