From 36a46e26d02dea68df2d0225331f8cd7e08a0fb6 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 13 Dec 2023 17:11:14 +0100
Subject: [PATCH] [Demo] Migrate `isLoading` to `isPending`

Following #9473, we should use `isPending` in our demos (even though `isLoading` still works) as it's the best practice.
---
 examples/crm/src/companies/CompanyShow.tsx           | 12 ++++++------
 examples/crm/src/companies/GridList.tsx              |  8 ++++----
 examples/crm/src/contacts/ContactEdit.tsx            |  4 ++--
 examples/crm/src/contacts/ContactList.tsx            |  4 ++--
 examples/crm/src/contacts/ContactShow.tsx            |  4 ++--
 examples/crm/src/contacts/TagsListEdit.tsx           |  6 +++---
 examples/crm/src/dashboard/DealsChart.tsx            |  4 ++--
 examples/crm/src/dashboard/DealsPipeline.tsx         |  4 ++--
 examples/crm/src/dashboard/HotContacts.tsx           |  4 ++--
 examples/crm/src/dashboard/LatestNotes.tsx           |  4 ++--
 examples/crm/src/deals/ContactList.tsx               |  4 ++--
 examples/crm/src/deals/DealListContent.tsx           |  4 ++--
 examples/crm/src/notes/NotesIterator.tsx             |  4 ++--
 examples/demo/src/categories/CategoryList.tsx        |  4 ++--
 examples/demo/src/dashboard/PendingOrder.tsx         |  4 ++--
 examples/demo/src/dashboard/PendingReviews.tsx       |  6 +++---
 examples/demo/src/orders/Basket.tsx                  |  4 ++--
 examples/demo/src/orders/MobileGrid.tsx              |  4 ++--
 examples/demo/src/products/GridList.tsx              |  4 ++--
 examples/demo/src/reviews/ReviewListMobile.tsx       |  4 ++--
 examples/demo/src/visitors/MobileGrid.tsx            |  4 ++--
 examples/simple/src/customRouteLayout.tsx            |  6 +++---
 .../src/list/SimpleList/SimpleList.tsx               |  1 +
 23 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
index b715ea3bf88..daf3b9cbdb3 100644
--- a/examples/crm/src/companies/CompanyShow.tsx
+++ b/examples/crm/src/companies/CompanyShow.tsx
@@ -45,12 +45,12 @@ export const CompanyShow = () => (
 );
 
 const CompanyShowContent = () => {
-    const { record, isLoading } = useShowContext<Company>();
+    const { record, isPending } = useShowContext<Company>();
     const [tabValue, setTabValue] = useState(0);
     const handleTabChange = (event: ChangeEvent<{}>, newValue: number) => {
         setTabValue(newValue);
     };
-    if (isLoading || !record) return null;
+    if (isPending || !record) return null;
     return (
         <Box mt={2} display="flex">
             <Box flex="1">
@@ -146,8 +146,8 @@ const TabPanel = (props: TabPanelProps) => {
 };
 
 const ContactsIterator = () => {
-    const { data: contacts, isLoading } = useListContext<Contact>();
-    if (isLoading) return null;
+    const { data: contacts, isPending } = useListContext<Contact>();
+    if (isPending) return null;
 
     const now = Date.now();
     return (
@@ -214,8 +214,8 @@ const CreateRelatedContactButton = () => {
 };
 
 const DealsIterator = () => {
-    const { data: deals, isLoading } = useListContext<Deal>();
-    if (isLoading) return null;
+    const { data: deals, isPending } = useListContext<Deal>();
+    if (isPending) return null;
 
     const now = Date.now();
     return (
diff --git a/examples/crm/src/companies/GridList.tsx b/examples/crm/src/companies/GridList.tsx
index c72b8fefb3a..9e0e7b8a3da 100644
--- a/examples/crm/src/companies/GridList.tsx
+++ b/examples/crm/src/companies/GridList.tsx
@@ -26,9 +26,9 @@ const LoadingGridList = () => (
 );
 
 const LoadedGridList = () => {
-    const { data, isLoading } = useListContext<Company>();
+    const { data, isPending } = useListContext<Company>();
 
-    if (isLoading) return null;
+    if (isPending) return null;
 
     return (
         <Box display="flex" flexWrap="wrap" width="100%" gap={1}>
@@ -42,6 +42,6 @@ const LoadedGridList = () => {
 };
 
 export const ImageList = () => {
-    const { isLoading } = useListContext();
-    return isLoading ? <LoadingGridList /> : <LoadedGridList />;
+    const { isPending } = useListContext();
+    return isPending ? <LoadingGridList /> : <LoadedGridList />;
 };
diff --git a/examples/crm/src/contacts/ContactEdit.tsx b/examples/crm/src/contacts/ContactEdit.tsx
index 069da090e5f..fc9336a9e65 100644
--- a/examples/crm/src/contacts/ContactEdit.tsx
+++ b/examples/crm/src/contacts/ContactEdit.tsx
@@ -14,8 +14,8 @@ export const ContactEdit = () => (
 );
 
 const ContactEditContent = () => {
-    const { isLoading, record } = useEditContext<Contact>();
-    if (isLoading || !record) return null;
+    const { isPending, record } = useEditContext<Contact>();
+    if (isPending || !record) return null;
     return (
         <Box mt={2} display="flex">
             <Box flex="1">
diff --git a/examples/crm/src/contacts/ContactList.tsx b/examples/crm/src/contacts/ContactList.tsx
index 8f40c754259..a4df3ab36e7 100644
--- a/examples/crm/src/contacts/ContactList.tsx
+++ b/examples/crm/src/contacts/ContactList.tsx
@@ -38,11 +38,11 @@ import { Contact } from '../types';
 const ContactListContent = () => {
     const {
         data: contacts,
-        isLoading,
+        isPending,
         onToggleItem,
         selectedIds,
     } = useListContext<Contact>();
-    if (isLoading) {
+    if (isPending) {
         return <SimpleListLoading hasLeftAvatarOrIcon hasSecondaryText />;
     }
     const now = Date.now();
diff --git a/examples/crm/src/contacts/ContactShow.tsx b/examples/crm/src/contacts/ContactShow.tsx
index 476d82b698b..35af63034e7 100644
--- a/examples/crm/src/contacts/ContactShow.tsx
+++ b/examples/crm/src/contacts/ContactShow.tsx
@@ -21,8 +21,8 @@ export const ContactShow = () => (
 );
 
 const ContactShowContent = () => {
-    const { record, isLoading } = useShowContext<Contact>();
-    if (isLoading || !record) return null;
+    const { record, isPending } = useShowContext<Contact>();
+    if (isPending || !record) return null;
     return (
         <Box mt={2} display="flex">
             <Box flex="1">
diff --git a/examples/crm/src/contacts/TagsListEdit.tsx b/examples/crm/src/contacts/TagsListEdit.tsx
index 671537684ff..ffbe5f72078 100644
--- a/examples/crm/src/contacts/TagsListEdit.tsx
+++ b/examples/crm/src/contacts/TagsListEdit.tsx
@@ -34,14 +34,14 @@ export const TagsListEdit = () => {
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const [disabled, setDisabled] = useState(false);
 
-    const { data: allTags, isLoading: isLoadingAllTags } = useGetList<Tag>(
+    const { data: allTags, isPending: isPendingAllTags } = useGetList<Tag>(
         'tags',
         {
             pagination: { page: 1, perPage: 10 },
             sort: { field: 'name', order: 'ASC' },
         }
     );
-    const { data: tags, isLoading: isLoadingRecordTags } = useGetMany<Tag>(
+    const { data: tags, isPending: isPendingRecordTags } = useGetMany<Tag>(
         'tags',
         { ids: record.tags },
         { enabled: record && record.tags && record.tags.length > 0 }
@@ -119,7 +119,7 @@ export const TagsListEdit = () => {
         );
     };
 
-    if (isLoadingRecordTags || isLoadingAllTags) return null;
+    if (isPendingRecordTags || isPendingAllTags) return null;
     return (
         <>
             {tags?.map(tag => (
diff --git a/examples/crm/src/dashboard/DealsChart.tsx b/examples/crm/src/dashboard/DealsChart.tsx
index 0c0277d2c5e..4b925d59cca 100644
--- a/examples/crm/src/dashboard/DealsChart.tsx
+++ b/examples/crm/src/dashboard/DealsChart.tsx
@@ -16,7 +16,7 @@ const multiplier = {
 };
 
 export const DealsChart = () => {
-    const { data, isLoading } = useGetList<Deal>('deals', {
+    const { data, isPending } = useGetList<Deal>('deals', {
         pagination: { perPage: 100, page: 1 },
         sort: {
             field: 'start_at',
@@ -67,7 +67,7 @@ export const DealsChart = () => {
         return amountByMonth;
     }, [data]);
 
-    if (isLoading) return null; // FIXME return skeleton instead
+    if (isPending) return null; // FIXME return skeleton instead
 
     const range = months.reduce(
         (acc, month) => {
diff --git a/examples/crm/src/dashboard/DealsPipeline.tsx b/examples/crm/src/dashboard/DealsPipeline.tsx
index a1f77259830..67de5c513b5 100644
--- a/examples/crm/src/dashboard/DealsPipeline.tsx
+++ b/examples/crm/src/dashboard/DealsPipeline.tsx
@@ -15,7 +15,7 @@ import { Deal } from '../types';
 
 export const DealsPipeline = () => {
     const { identity } = useGetIdentity();
-    const { data, total, isLoading } = useGetList<Deal>(
+    const { data, total, isPending } = useGetList<Deal>(
         'deals',
         {
             pagination: { page: 1, perPage: 10 },
@@ -61,7 +61,7 @@ export const DealsPipeline = () => {
                     linkType="show"
                     data={getOrderedDeals(data)}
                     total={total}
-                    isLoading={isLoading}
+                    isPending={isPending}
                     primaryText={deal => deal.name}
                     secondaryText={deal =>
                         `${deal.amount.toLocaleString('en-US', {
diff --git a/examples/crm/src/dashboard/HotContacts.tsx b/examples/crm/src/dashboard/HotContacts.tsx
index ed3b52f0add..187dcd6cf5c 100644
--- a/examples/crm/src/dashboard/HotContacts.tsx
+++ b/examples/crm/src/dashboard/HotContacts.tsx
@@ -12,7 +12,7 @@ export const HotContacts = () => {
     const {
         data: contactData,
         total: contactTotal,
-        isLoading: contactsLoading,
+        isPending: contactsLoading,
     } = useGetList<Contact>(
         'contacts',
         {
@@ -42,7 +42,7 @@ export const HotContacts = () => {
                     linkType="show"
                     data={contactData}
                     total={contactTotal}
-                    isLoading={contactsLoading}
+                    isPending={contactsLoading}
                     primaryText={contact =>
                         `${contact.first_name} ${contact.last_name}`
                     }
diff --git a/examples/crm/src/dashboard/LatestNotes.tsx b/examples/crm/src/dashboard/LatestNotes.tsx
index 0c9058d7e50..0def8b6afd7 100644
--- a/examples/crm/src/dashboard/LatestNotes.tsx
+++ b/examples/crm/src/dashboard/LatestNotes.tsx
@@ -16,7 +16,7 @@ export const LatestNotes = () => {
     const { identity } = useGetIdentity();
     const {
         data: contactNotesData,
-        isLoading: contactNotesLoading,
+        isPending: contactNotesLoading,
     } = useGetList(
         'contactNotes',
         {
@@ -26,7 +26,7 @@ export const LatestNotes = () => {
         },
         { enabled: Number.isInteger(identity?.id) }
     );
-    const { data: dealNotesData, isLoading: dealNotesLoading } = useGetList(
+    const { data: dealNotesData, isPending: dealNotesLoading } = useGetList(
         'dealNotes',
         {
             pagination: { page: 1, perPage: 5 },
diff --git a/examples/crm/src/deals/ContactList.tsx b/examples/crm/src/deals/ContactList.tsx
index 77267475676..9a5e68676be 100644
--- a/examples/crm/src/deals/ContactList.tsx
+++ b/examples/crm/src/deals/ContactList.tsx
@@ -4,9 +4,9 @@ import { Box, Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
 export const ContactList = () => {
-    const { data, isLoading } = useListContext();
+    const { data, isPending } = useListContext();
 
-    if (isLoading) return <div style={{ height: '2em' }} />;
+    if (isPending) return <div style={{ height: '2em' }} />;
     return (
         <Box
             component="ul"
diff --git a/examples/crm/src/deals/DealListContent.tsx b/examples/crm/src/deals/DealListContent.tsx
index 6e26f08c579..492139144d0 100644
--- a/examples/crm/src/deals/DealListContent.tsx
+++ b/examples/crm/src/deals/DealListContent.tsx
@@ -9,7 +9,7 @@ import { DealColumn } from './DealColumn';
 import { DealsByStage, getDealsByStage, stages } from './stages';
 
 export const DealListContent = () => {
-    const { data: unorderedDeals, isLoading, refetch } = useListContext<Deal>();
+    const { data: unorderedDeals, isPending, refetch } = useListContext<Deal>();
     const dataProvider = useDataProvider();
 
     const [dealsByStage, setDealsByStage] = useState<DealsByStage>(
@@ -26,7 +26,7 @@ export const DealListContent = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [unorderedDeals]);
 
-    if (isLoading) return null;
+    if (isPending) return null;
 
     const onDragEnd: OnDragEndResponder = result => {
         const { destination, source } = result;
diff --git a/examples/crm/src/notes/NotesIterator.tsx b/examples/crm/src/notes/NotesIterator.tsx
index 7317429990f..c0c4bef7ab2 100644
--- a/examples/crm/src/notes/NotesIterator.tsx
+++ b/examples/crm/src/notes/NotesIterator.tsx
@@ -12,8 +12,8 @@ export const NotesIterator = ({
     showStatus?: boolean;
     reference: 'contacts' | 'deals';
 }) => {
-    const { data, isLoading } = useListContext();
-    if (isLoading) return null;
+    const { data, isPending } = useListContext();
+    if (isPending) return null;
     return (
         <>
             <NewNote showStatus={showStatus} reference={reference} />
diff --git a/examples/demo/src/categories/CategoryList.tsx b/examples/demo/src/categories/CategoryList.tsx
index 2b46a1ac049..b03e1b1208c 100644
--- a/examples/demo/src/categories/CategoryList.tsx
+++ b/examples/demo/src/categories/CategoryList.tsx
@@ -31,8 +31,8 @@ const CategoryList = () => (
 );
 
 const CategoryGrid = () => {
-    const { data, isLoading } = useListContext<Category>();
-    if (isLoading) {
+    const { data, isPending } = useListContext<Category>();
+    if (isPending) {
         return null;
     }
     return (
diff --git a/examples/demo/src/dashboard/PendingOrder.tsx b/examples/demo/src/dashboard/PendingOrder.tsx
index d8ea481a49b..3940572c594 100644
--- a/examples/demo/src/dashboard/PendingOrder.tsx
+++ b/examples/demo/src/dashboard/PendingOrder.tsx
@@ -19,7 +19,7 @@ interface Props {
 export const PendingOrder = (props: Props) => {
     const { order } = props;
     const translate = useTranslate();
-    const { referenceRecord: customer, isLoading } = useReference<Customer>({
+    const { referenceRecord: customer, isPending } = useReference<Customer>({
         reference: 'customers',
         id: order.customer_id,
     });
@@ -27,7 +27,7 @@ export const PendingOrder = (props: Props) => {
     return (
         <ListItem button component={Link} to={`/commands/${order.id}`}>
             <ListItemAvatar>
-                {isLoading ? (
+                {isPending ? (
                     <Avatar />
                 ) : (
                     <Avatar
diff --git a/examples/demo/src/dashboard/PendingReviews.tsx b/examples/demo/src/dashboard/PendingReviews.tsx
index f51a82cc97b..d982a5d2e51 100644
--- a/examples/demo/src/dashboard/PendingReviews.tsx
+++ b/examples/demo/src/dashboard/PendingReviews.tsx
@@ -27,7 +27,7 @@ import { Customer, Review } from '../types';
 
 const PendingReviews = () => {
     const translate = useTranslate();
-    const { data: reviews, total, isLoading } = useGetList<Review>('reviews', {
+    const { data: reviews, total, isPending } = useGetList<Review>('reviews', {
         filter: { status: 'pending' },
         sort: { field: 'date', order: 'DESC' },
         pagination: { page: 1, perPage: 100 },
@@ -39,9 +39,9 @@ const PendingReviews = () => {
     // if the first customer is loaded, then all the customers are loaded.
     const isCustomerDataLoaded = useIsDataLoaded(
         ['customers', 'getMany', { ids: [String(reviews?.[0].customer_id)] }],
-        { enabled: !isLoading && reviews && reviews.length > 0 }
+        { enabled: !isPending && reviews && reviews.length > 0 }
     );
-    const display = isLoading || !isCustomerDataLoaded ? 'none' : 'block';
+    const display = isPending || !isCustomerDataLoaded ? 'none' : 'block';
 
     return (
         <CardWithIcon
diff --git a/examples/demo/src/orders/Basket.tsx b/examples/demo/src/orders/Basket.tsx
index aa660d18b11..c336bbbd608 100644
--- a/examples/demo/src/orders/Basket.tsx
+++ b/examples/demo/src/orders/Basket.tsx
@@ -17,7 +17,7 @@ const Basket = () => {
 
     const productIds = record ? record.basket.map(item => item.product_id) : [];
 
-    const { isLoading, data: products } = useGetMany<Product>(
+    const { isPending, data: products } = useGetMany<Product>(
         'products',
         { ids: productIds },
         { enabled: !!record }
@@ -29,7 +29,7 @@ const Basket = () => {
           }, {} as any)
         : {};
 
-    if (isLoading || !record || !products) return null;
+    if (isPending || !record || !products) return null;
 
     return (
         <Table>
diff --git a/examples/demo/src/orders/MobileGrid.tsx b/examples/demo/src/orders/MobileGrid.tsx
index 1fc501ae346..838d372df32 100644
--- a/examples/demo/src/orders/MobileGrid.tsx
+++ b/examples/demo/src/orders/MobileGrid.tsx
@@ -16,9 +16,9 @@ import CustomerReferenceField from '../visitors/CustomerReferenceField';
 import { Order } from '../types';
 
 const MobileGrid = () => {
-    const { data, isLoading } = useListContext<Order>();
+    const { data, isPending } = useListContext<Order>();
     const translate = useTranslate();
-    if (isLoading || data.length === 0) {
+    if (isPending || data.length === 0) {
         return null;
     }
     return (
diff --git a/examples/demo/src/products/GridList.tsx b/examples/demo/src/products/GridList.tsx
index 08dfda5bb97..5a3649e6790 100644
--- a/examples/demo/src/products/GridList.tsx
+++ b/examples/demo/src/products/GridList.tsx
@@ -5,8 +5,8 @@ import { useCreatePath, NumberField, useListContext } from 'react-admin';
 import { Link } from 'react-router-dom';
 
 const GridList = () => {
-    const { isLoading } = useListContext();
-    return isLoading ? <LoadingGridList /> : <LoadedGridList />;
+    const { isPending } = useListContext();
+    return isPending ? <LoadingGridList /> : <LoadedGridList />;
 };
 
 const useColsForWidth = () => {
diff --git a/examples/demo/src/reviews/ReviewListMobile.tsx b/examples/demo/src/reviews/ReviewListMobile.tsx
index 68b49eed701..91b3324ef51 100644
--- a/examples/demo/src/reviews/ReviewListMobile.tsx
+++ b/examples/demo/src/reviews/ReviewListMobile.tsx
@@ -7,8 +7,8 @@ import { ReviewItem } from './ReviewItem';
 import { Review } from './../types';
 
 const ReviewListMobile = () => {
-    const { data, isLoading, total } = useListContext<Review>();
-    if (isLoading || Number(total) === 0) {
+    const { data, isPending, total } = useListContext<Review>();
+    if (isPending || Number(total) === 0) {
         return null;
     }
     return (
diff --git a/examples/demo/src/visitors/MobileGrid.tsx b/examples/demo/src/visitors/MobileGrid.tsx
index 12f079d231c..31088ee81ca 100644
--- a/examples/demo/src/visitors/MobileGrid.tsx
+++ b/examples/demo/src/visitors/MobileGrid.tsx
@@ -17,9 +17,9 @@ import { Customer } from '../types';
 
 const MobileGrid = () => {
     const translate = useTranslate();
-    const { data, isLoading } = useListContext<Customer>();
+    const { data, isPending } = useListContext<Customer>();
 
-    if (isLoading || data.length === 0) {
+    if (isPending || data.length === 0) {
         return null;
     }
 
diff --git a/examples/simple/src/customRouteLayout.tsx b/examples/simple/src/customRouteLayout.tsx
index 0c80dd53893..b2765022f77 100644
--- a/examples/simple/src/customRouteLayout.tsx
+++ b/examples/simple/src/customRouteLayout.tsx
@@ -12,12 +12,12 @@ const sort = { field: 'published_at', order: 'DESC' } as const;
 const CustomRouteLayout = ({ title = 'Posts' }) => {
     useAuthenticated();
 
-    const { data, total, isLoading } = useGetList('posts', {
+    const { data, total, isPending } = useGetList('posts', {
         pagination: { page: 1, perPage: 10 },
         sort,
     });
 
-    return !isLoading ? (
+    return !isPending ? (
         <div>
             <Title title="Example Admin" />
             <h1>{title}</h1>
@@ -27,7 +27,7 @@ const CustomRouteLayout = ({ title = 'Posts' }) => {
             <Datagrid
                 sort={sort}
                 data={data}
-                isLoading={isLoading}
+                isPending={isPending}
                 total={total}
                 rowClick="edit"
             >
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
index f2af7bb2e85..d5def72170f 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -287,6 +287,7 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
     resource?: string;
     data?: RecordType[];
     isLoading?: boolean;
+    isPending?: boolean;
     isLoaded?: boolean;
     total?: number;
 }