commerce/components/product/variant-selector-skeleton.tsx

import { ProductOption } from 'lib/shopify/types';

export function VariantSelectorSkeleton({
  options
}: {
  options: ProductOption[];
}) {
  const hasNoOptionsOrJustOneOption =
    !options.length ||
    (options.length === 1 && options[0]?.values.length === 1);

  if (hasNoOptionsOrJustOneOption) {
    return null;
  }

  return options.map((option) => (
    <form key={option.id}>
      <dl className="mb-8">
        <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
        <dd className="flex flex-wrap gap-3">
          {option.values.map((value) => {
            return (
              <button
                key={value}
                aria-disabled
                disabled
                title={`${option.name} ${value}`}
                className={
                  'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 relative z-10 cursor-not-allowed overflow-hidden text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 dark:before:bg-neutral-700'
                }
              >
                {value}
              </button>
            );
          })}
        </dd>
      </dl>
    </form>
  ));
}