File size: 619 Bytes
1e22bf6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { AspectRatio, Group, Skeleton } from "@mantine/core";
import { em } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";

export default function ImageResultsLoadingState() {
  const hasSmallScreen = useMediaQuery(`(max-width: ${em(530)})`);
  const numberOfSquareSkeletons = hasSmallScreen ? 4 : 6;
  const skeletonIds = Array.from(
    { length: numberOfSquareSkeletons },
    (_, i) => `skeleton-${i}`,
  );

  return (
    <Group>
      {skeletonIds.map((id) => (
        <AspectRatio key={id} ratio={1} flex={1}>
          <Skeleton />
        </AspectRatio>
      ))}
    </Group>
  );
}