@applica-software-guru/react-admin 1.5.314 → 1.5.316

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.314"
+  "version": "1.5.316"
 }

package/src/components/Layout/Provider.tsx

@@ -6,6 +6,7 @@ import { Dialog, useMediaQuery, useTheme } from '@mui/material';
 import _ from 'lodash';
 import { UseGetIdentityResult, useAuthProvider, useGetIdentity } from 'ra-core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
+import { useLoading } from 'react-admin';
 
 enum LayoutActionType {
   UPDATE_MEDIA = 'updateMedia',
@@ -154,6 +155,7 @@ function LayoutProvider(props: ILayoutProviderProps) {
   const handlePasswordChange = useCallback(() => setNeedToChangePassword(false), []);
   const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
   const { logoIcon, logoMain, enableNotification, notification } = props;
+  const isLayoutLoading = useLoading();
 
   useEffect(() => {
     dispatch({
@@ -216,6 +218,7 @@ function LayoutProvider(props: ILayoutProviderProps) {
   }, [theme.palette.mode]);
 
   useEffect(() => {
+    if (isLayoutLoading) return;
     // Check if authProvider contains a method called isImpersonating
     if (!authProvider.isImpersonating) {
       // eslint-disable-next-line no-console
@@ -225,7 +228,7 @@ function LayoutProvider(props: ILayoutProviderProps) {
     authProvider?.isImpersonating().then((isImpersonating: boolean) => {
       setNeedToChangePassword(!isImpersonating && identity?.data?.needToChangePassword === true);
     });
-  }, [identity?.data?.needToChangePassword, authProvider]);
+  }, [identity?.data?.needToChangePassword, authProvider, isLayoutLoading]);
 
   return (
     <LayoutContext.Provider value={value}>

package/src/components/ra-lists/Empty.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable filenames/match-regex */
-import { Inbox } from '@mui/icons-material';
+import { DropboxOutlined } from '@ant-design/icons';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useGetResourceLabel, useResourceContext, useResourceDefinition, useTranslate } from 'ra-core';
@@ -22,6 +22,7 @@ type EmptyProps = {
    * @example 'my-custom-empty my-custom-empty--full-width'
    **/
   className?: string;
+  hasCreate?: boolean;
 };
 
 const StyledToolbar = styled('div')(({ theme }) => ({
@@ -35,8 +36,9 @@ const StyledToolbar = styled('div')(({ theme }) => ({
  * @example
  * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
  */
-function Empty({ actions, className, ...props }: EmptyProps): JSX.Element {
+function Empty({ actions, className, hasCreate: _hasCreate, ...props }: EmptyProps): JSX.Element {
   const { hasCreate } = useResourceDefinition(props);
+  const canCreate = _hasCreate ?? hasCreate;
   const resource = useResourceContext(props);
 
   const translate = useTranslate();
@@ -53,13 +55,13 @@ function Empty({ actions, className, ...props }: EmptyProps): JSX.Element {
   return (
     <Root className={className}>
       <div className={EmptyClasses.message}>
-        <Inbox className={EmptyClasses.icon} />
+        <DropboxOutlined className={EmptyClasses.icon} />
         <Typography variant="h4" paragraph>
           {translate(`resources.${resource}.empty`, {
             _: emptyMessage
           })}
         </Typography>
-        {hasCreate ? (
+        {canCreate ? (
           <Typography variant="body1">
             {translate(`resources.${resource}.invite`, {
               _: inviteMessage
@@ -86,6 +88,7 @@ const Root = styled('span', {
   overridesResolver: (_, styles) => styles.root
 })(({ theme }) => ({
   flex: 1,
+  height: 'calc(100vh - 200px)',
   [`& .${EmptyClasses.message}`]: {
     textAlign: 'center',
     opacity: theme.palette.mode === 'light' ? 0.5 : 0.8,
@@ -94,8 +97,7 @@ const Root = styled('span', {
   },
 
   [`& .${EmptyClasses.icon}`]: {
-    width: '9em',
-    height: '9em'
+    fontSize: '9em'
   },
 
   [`& .${EmptyClasses.toolbar}`]: {

package/src/components/ra-lists/List.tsx

@@ -1,11 +1,9 @@
-import { MainCard } from '@/components/MainCard';
 import { ListView } from '@/components/ra-lists/ListView';
 import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
-import React, { ReactElement, isValidElement } from 'react';
+import { ReactElement } from 'react';
 import { ListProps } from 'react-admin';
 import { Pagination } from '@/components/Pagination/Pagination';
-import { FilterSidebar } from './FilterSidebar';
 import { ListViewProvider } from './ListViewProvider';
 
 /**
@@ -198,25 +196,7 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 }));
 
 function List(props: ListProps): ReactElement {
-  const { aside } = props;
-
-  // Check if 'aside' is a valid React element
-  const isAsideValid = isValidElement(aside);
-
-  // Determine if 'aside' is a FilterSidebar component
-  const isFilterSidebar = isAsideValid && aside?.type === FilterSidebar;
-
-  // Use React.Fragment if there's a generic 'aside', otherwise use MainCard
-  const ListWrapper = isAsideValid && !isFilterSidebar ? React.Fragment : MainCard;
-
-  // Define props for the ListWrapper based on the presence of 'aside'
-  const listWrapperProps = !aside || isFilterSidebar ? { content: false } : undefined;
-
-  return (
-    <ListWrapper {...listWrapperProps}>
-      <StyledList {...props} pagination={<Pagination />} />
-    </ListWrapper>
-  );
+  return <StyledList {...props} pagination={<Pagination />} />;
 }
 
 export { List };

package/src/components/ra-lists/ListView.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable filenames/match-regex */
 import { Error } from '@/components/Layout/Error';
-import { Card, CardContent } from '@mui/material';
+import { Card, CardContent, CircularProgress } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import clsx from 'clsx';
@@ -16,6 +16,8 @@ import {
 } from 'react-admin';
 import { ListToolbar } from './ListToolbar';
 import { FilterSidebar } from './FilterSidebar';
+import { MainCard } from '@/components/MainCard';
+
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
 const defaultEmpty = <Empty />;
@@ -73,10 +75,7 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
         {!error && (
           <Content className={ListClasses.content}>
             {bulkActionButtons && children && React.isValidElement<any>(children)
-              ? // FIXME remove in 5.0
-                cloneElement(children, {
-                  bulkActionButtons
-                })
+              ? cloneElement(children, { bulkActionButtons })
               : children}
           </Content>
         )}
@@ -101,10 +100,38 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
   const shouldRenderEmptyPage =
     !isLoading && data?.length === 0 && !Object.keys(filterValues).length && empty !== false;
 
+  // Check if 'aside' is a valid React element
+  const isAsideValid = React.isValidElement(aside);
+
+  // Determine if 'aside' is a FilterSidebar component
+  const isFilterSidebar = isAsideValid && aside?.type === FilterSidebar;
+
+  // Use React.Fragment if there's a generic 'aside', otherwise use MainCard
+  const Wrapper = isLoading || shouldRenderEmptyPage || (isAsideValid && !isFilterSidebar) ? React.Fragment : MainCard;
+
+  // Define props for the ListWrapper based on the presence of 'aside'
+  const wrapperProps =
+    !isLoading && !shouldRenderEmptyPage && (!aside || isFilterSidebar) ? { content: false } : undefined;
   return (
     <Root className={clsx('list-page', className)} {...rest}>
       <Title title={title} defaultTitle={defaultTitle} preferenceKey={`${resource}.list.title`} />
-      {shouldRenderEmptyPage ? renderEmpty() : renderList()}
+      <Wrapper {...wrapperProps}>
+        {isLoading ? (
+          <CircularProgress
+            sx={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              marginTop: '-20px',
+              marginLeft: '-20px'
+            }}
+          />
+        ) : shouldRenderEmptyPage ? (
+          renderEmpty()
+        ) : (
+          renderList()
+        )}
+      </Wrapper>
       {hasAsideSidebar ? <AsideCard aside={aside} /> : null}
       {/* @ts-ignore */}
       {hasFilterSidebar ? React.cloneElement(aside, { filters }) : null}
@@ -399,6 +426,9 @@ const Root = styled('div', {
 })(({ theme }) => ({
   display: 'flex',
 
+  '& >.MuiPaper-root': {
+    flex: 1
+  },
   [`& .${ListClasses.main}`]: {
     flex: '1 1 auto',
     display: 'flex',
@@ -415,7 +445,9 @@ const Root = styled('div', {
 
   [`& .${ListClasses.actions}`]: {},
 
-  [`& .${ListClasses.noResults}`]: {},
+  [`& .${ListClasses.noResults}`]: {
+    alignContent: 'center'
+  },
 
   [`& .${ListClasses.asideCard}`]: {
     [theme.breakpoints.down('md')]: {