Improve activity logger

marmelab · Jul 29, 2024 · 8f519a3 · 8f519a3
1 parent 2bf510e
commit 8f519a3
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/examples/crm/src/activity/ActivityLog.tsx b/examples/crm/src/activity/ActivityLog.tsx
@@ -1,4 +1,4 @@
-import { Alert, Skeleton } from '@mui/material';
+import { Alert, Divider, Skeleton, Stack } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { Identifier, useDataProvider } from 'react-admin';
 import { CustomDataProvider } from '../dataProvider';
@@ -17,7 +17,28 @@ export function ActivityLog({ companyId, pageSize = 20 }: ActivityLogProps) {
     });
 
     if (isPending) {
-        return <Skeleton />;
+        return (
+            <Stack p={2}>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <Stack spacing={2} sx={{ mt: 1 }} key={index}>
+                        <Stack
+                            direction="row"
+                            spacing={2}
+                            sx={{ alignItems: 'center' }}
+                        >
+                            <Skeleton
+                                variant="circular"
+                                width={20}
+                                height={20}
+                            />
+                            <Skeleton width="100%" />
+                        </Stack>
+                        <Skeleton variant="rectangular" height={50} />
+                        <Divider />
+                    </Stack>
+                ))}
+            </Stack>
+        );
     }
 
     if (error) {