Data loading skeleton best practices

fetching-data.tsx

function App() {
  const itemId: string | null = /* --snip-- */;

  return <Item id={itemId} />;
}

interface ItemProps {
  id: string | null;
}

function Item({ id }: ItemProps) {
  if (id == null) {
    return <ItemView item={null} />;
  }
  return <ItemQuery id={id} />;
}

interface ItemViewProps {
  item: Item | null;
}

function ItemView({ item }: ItemViewProps) {
  return (
    <div>
      <p>{item.name ?? <Skeleton />}</p>
      <p>{item.description ?? <Skeleton count={3} />}</p>
    </div>
  );
}
        
interface ItemQueryProps {
  id: string;
}
        
function ItemQuery({ id }) {
  const query = useQuery(/* --snip-- */);
  // other expensive hooks

  return <ItemView item={query.data ?? null} />;
}

loading-lists.tsx

function App() {
  const query = useQuery(/* --snip-- */);

  return (
    <ul>
      {query.isLoading ? (
        range(5).map(() => <ListItem item={null} />)
      ) : (
        query.data.map((item) => <ListItem item={item} />)
      )}
    </ul>
  );
}

interface ListItemProps {
  item: Item | null;
}

function ListItem({ item }: ListItemProps) {
  return (
    <div>
      <p>{item.name ?? <Skeleton />}</p>
      <p>{item.description ?? <Skeleton count={3} />}</p>
    </div>
  );
}