#

luxiaotao1123

2024-09-20 f6ba6151e53a9cd4bd46f56edcb6d88ec86a92bd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import * as React from 'react';
import { Box, Paper, Typography } from '@mui/material';
import { RecordContextProvider, useListContext } from 'react-admin';
 
// import { CompanyCard } from './CompanyCard';
 
const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key));
 
const LoadingGridList = () => (
    <Box display="flex" flexWrap="wrap" width={1008} gap={1}>
        {times(15, key => (
            <Paper
                sx={{
                    height: 200,
                    width: 194,
                    display: 'flex',
                    flexDirection: 'column',
                    backgroundColor: 'grey[200]',
                }}
                key={key}
            />
        ))}
    </Box>
);
 
// const LoadedGridList = () => {
//     const { data, error, isPending } = useListContext();
 
//     if (isPending || error) return null;
 
//     return (
//         <Box
//             width="100%"
//             gap={1}
//             display="grid"
//             gridTemplateColumns="repeat(auto-fill, minmax(180px, 1fr))"
//         >
//             {data.map(record => (
//                 <RecordContextProvider key={record.id} value={record}>
//                     <CompanyCard />
//                 </RecordContextProvider>
//             ))}
 
//             {data.length === 0 && (
//                 <Typography p={2}>No companies found</Typography>
//             )}
//         </Box>
//     );
// };
 
export const ImageList = () => {
    const { isPending } = useListContext();
    // return isPending ? <LoadingGridList /> : <LoadedGridList />;
    return <LoadingGridList />;
};