import { useSidebarColors } from '@composed-components/LibrariesSidebar/hooks/useGetSidebarColors';
import ListItem from '@design-system/List/components/ListItem';
import Stack from '@mui/material/Stack';

export const SidebarLoading = () => {
  const colors = useSidebarColors();
  const list = Array.from({ length: 4 });

  return (
    <Stack
      sx={{
        gap: 1,
        backgroundColor: colors.MAIN_WHITE,
        height: '100%',
      }}
    >
      {list.map((_, index) => (
        <ListItem
          key={index}
          loading
        />
      ))}
    </Stack>
  );
};
