SimpleListLoading

Skeleton placeholder displayed by <SimpleList> while data is loading.

Usage

<SimpleList> already renders <SimpleListLoading> for you while data is loading. You can render it directly when composing your own list-like UI:

import { SimpleListLoading } from "@/components/admin";
 
const Loading = () => (
  <SimpleListLoading hasLeftAvatarOrIcon hasSecondaryText nbFakeLines={8} />
);

The skeleton mirrors the layout of <SimpleList> so the page does not jump when the data arrives. Pass the same has… flags you'd pass to <SimpleList> (i.e. hasLeftAvatarOrIcon if you set leftAvatar/leftIcon, etc.) so the placeholder matches the final layout.

Props