Filter the shop, switch the view

Pick a category and the products that stay slide together; switch to a list and every card reshapes into a row.

Live demo

Moon Vase$148A round, milk-white body with a short neck.
Ember Bottle Vase$96A long neck over an iron-red belly.
Lagoon Vase$132Blues and greens running into each other.
Blossom Ginger Jar$164Plum blossom on a cobalt ground.
Brushstroke Jug$88Quick strokes of turquoise and blue.
Faceted Carafe$120Hand-cut crystal that scatters the light.
Celadon Fluted Dish$76A jade-green glaze over a fluted rim.
Poppy Plate$54A red poppy, two bugs and a blue rim.
Slipware Dish$68Trailed slip in rings of cream and amber.
Tulip Bowl$92White tulips on cobalt, inside a green rim.
Porcelain Bowl$48Thin, white and faintly translucent.
Celadon Cone Bowl$58Straight sides, a pale green crackle.

Loading the shop…

Reduced motion: Movement and resizing happen at once, not over time: the view switches in place, and products that come or go fade.

The code

examples/browse/Demo.tsx

// The shop, filtered and switched between views, a server component: it starts the shop's read and
// hands its promise to the client part.
import { listProducts } from "~/lib/store.ts"
import { Browse } from "./Client.tsx"

export default function Demo() {
  return <Browse products={listProducts()} />
}

examples/browse/Client.tsx

"use client"
import { formatPrice } from "@wardic/example-storefront-shared/format"
import { photoOf, srcsetOf } from "@wardic/example-storefront-shared/images"
import { CATEGORIES, type Product } from "@wardic/example-storefront-shared/server"
import { AnimatePresence, motion } from "motion/react"
import { Suspense, use, useState } from "react"

const FILTERS = ["All", ...CATEGORIES] as const
type Filter = (typeof FILTERS)[number]
type View = "grid" | "list"

// A product a filter brings in grows into place; one it takes out shrinks and fades where it was,
// out of the flow (popLayout), while the ones after it slide into its space.
const item = {
  initial: { opacity: 0, scale: 0.9 },
  animate: { opacity: 1, scale: 1 },
  exit: { opacity: 0, scale: 0.9 },
} as const

export function Browse({ products }: { readonly products: Promise<ReadonlyArray<Product>> }) {
  const [filter, setFilter] = useState<Filter>("All")
  const [view, setView] = useState<View>("grid")

  return (
    <div className="shop">
      <div className="shop-toolbar">
        <div className="chips" role="group" aria-label="Category">
          {FILTERS.map((name) => (
            <button key={name} className="chip" aria-pressed={filter === name} onClick={() => setFilter(name)}>
              {name}
            </button>
          ))}
        </div>
        {/* Switching the view changes every card's size: React renders each again, and Motion
            animates it from where it was. */}
        <div className="segmented" role="group" aria-label="View">
          <button aria-pressed={view === "grid"} onClick={() => setView("grid")}>
            Grid
          </button>
          <button aria-pressed={view === "list"} onClick={() => setView("list")}>
            List
          </button>
        </div>
      </div>
      <Suspense fallback={<p className="muted">Loading the shop…</p>}>
        <Items products={products} filter={filter} view={view} />
      </Suspense>
    </div>
  )
}

function Items({ filter, view, ...props }: { readonly products: Promise<ReadonlyArray<Product>>; readonly filter: Filter; readonly view: View }) {
  const shown = use(props.products).filter((product) => filter === "All" || product.category === filter)
  return (
    <ul className="shop-items" data-view={view}>
      {/* initial={false}: the products already there when the page opens don't grow in. */}
      <AnimatePresence mode="popLayout" initial={false}>
        {shown.map((product) => (
          <Item key={product.id} product={product} />
        ))}
      </AnimatePresence>
    </ul>
  )
}

function Item({ product }: { readonly product: Product }) {
  const photo = photoOf(product.id)
  return (
    <motion.li className="shop-item" layout {...item}>
      {/* The photo changes size between the views: plain layout, its corners kept round as it scales. */}
      <motion.div className="photo" layout>
        <img src={photo.small} srcSet={srcsetOf(photo)} sizes="(max-width: 640px) 50vw, 240px" width={photo.width} height={photo.height} alt={product.name} />
      </motion.div>
      {/* Text only travels: layout="position" moves it to its new place without stretching it. */}
      <motion.span className="name" layout="position">
        {product.name}
      </motion.span>
      <motion.span className="price" layout="position">
        {formatPrice(product.price)}
      </motion.span>
      <motion.span className="tagline" layout="position">
        {product.tagline}
      </motion.span>
    </motion.li>
  )
}

Highlighting…