[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.
marmelab · Dec 13, 2023 · 36a46e2 · 36a46e2
1 parent aa2dfa2
commit 36a46e2
Show file tree

Hide file tree

Showing 23 changed files with 54 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -19,15 +19,15 @@ 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,
     });
 
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -287,6 +287,7 @@ export interface SimpleListProps<RecordType extends RaRecord = any>
     resource?: string;
     data?: RecordType[];
     isLoading?: boolean;
+    isPending?: boolean;
     isLoaded?: boolean;
     total?: number;
 }