Collection Row with Description and Loading State

A Collection List Item Display Card laid out as a compact list row - thumbnail, title, a short description and a chevron - with a skeleton placeholder while the collection is loading.

Example

import React from 'react';
import { Actionable, Box, Flexbox, Icon, Image, Text } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';

const skeleton = (
  <Flexbox flexDirection="row" alignItems="center" gap={12} py={10}>
    <Box width={64} height={64} borderRadius={8} bg="gray-100" />
    <Flexbox flexDirection="column" flex={1} gap={6}>
      <Box height={14} width="60%" borderRadius={4} bg="gray-100" />
      <Box height={12} width="90%" borderRadius={4} bg="gray-100" />
    </Flexbox>
  </Flexbox>
);

const CollectionRow: CustomBlock.CollectionListItem = ({ data }) => {
  const { collection } = data;

  if (collection?.isLoading) return skeleton;
  if (!collection) return null;

  return (
    <Actionable action={collection.actions?.openDetailsPage}>
      <Flexbox flexDirection="row" alignItems="center" gap={12} py={10}>
        {collection.image ? (
          <Image src={collection.image} width={64} height={64} borderRadius={8} resizeMode="cover" />
        ) : (
          <Flexbox width={64} height={64} borderRadius={8} bg="gray-100" alignItems="center" justifyContent="center">
            <Icon icon="material-community-icons:shape-outline" size={24} color="gray-400" />
          </Flexbox>
        )}

        <Flexbox flexDirection="column" flex={1} gap={2}>
          <Text fontWeight="Bold" numberOfLines={1}>{collection.title}</Text>
          {collection.description ? (
            <Text fontSize="sm" color="gray-500" numberOfLines={2}>{collection.description}</Text>
          ) : null}
        </Flexbox>

        <Icon icon="material-community-icons:chevron-right" size={22} color="gray-400" />
      </Flexbox>
    </Actionable>
  );
};

export default CollectionRow;

How it works

• Loading state first. collection?.isLoading is checked before anything else, returning a skeleton with the same layout as the real row (thumbnail, title line, description line), so the list doesn't jump when the collection loads.
• Then a missing collection. if (!collection) return null; guards the case where there's no collection at all, as noted on the block type page.
• Not every collection has an image or description. The thumbnail falls back to an icon placeholder, and the description line is only rendered when there is one, so rows stay aligned either way.
• numberOfLines keeps long titles and descriptions to a fixed height, so every row in the list is the same size.