Pull to refresh

import { useRef, useState, type ReactNode, type TouchEvent } from 'react';
import { animate, motion, useMotionValue, useTransform } from 'motion/react';

const RESISTANCE = 0.5; // the list moves half as far as the finger
const THRESHOLD = 60; // px of list travel needed to refresh
const HOLD_AT = 48; // where the list waits while new items load
const SETTLE = { type: 'spring', bounce: 0 } as const;

// Desktop has no pull gesture, so keep a Refresh button there too.
type Props = { onRefresh: () => Promise<void>; children: ReactNode };

export function PullToRefresh({ onRefresh, children }: Props) {
  const y = useMotionValue(0);
  const rotate = useTransform(y, [0, THRESHOLD], [0, 360]);
  const startY = useRef<number | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  async function refresh() {
    setRefreshing(true);
    animate(y, HOLD_AT, SETTLE);
    await onRefresh();
    setRefreshing(false);
    animate(y, 0, SETTLE);
  }

  function onTouchMove(event: TouchEvent<HTMLDivElement>) {
    if (startY.current === null || event.currentTarget.scrollTop > 0) return;
    const pulled = event.touches[0]!.clientY - startY.current;
    y.set(Math.max(0, pulled) * RESISTANCE);
  }

  function onTouchEnd() {
    if (startY.current === null) return;
    startY.current = null;
    if (y.get() > THRESHOLD) refresh();
    else animate(y, 0, SETTLE);
  }

  return (
    <div className='relative h-[32rem] overflow-hidden rounded-2xl border'>
      {/* Hidden behind the list until it moves; turns with the pull. */}
      <motion.span
        style={{ rotate }}
        className={`absolute top-3 left-1/2 -ml-3 size-6 rounded-full border-2 border-muted border-t-foreground ${refreshing ? 'animate-spin' : ''}`}
      />
      <motion.div
        style={{ y }}
        onTouchStart={(event) => {
          const atTop = event.currentTarget.scrollTop === 0 && !refreshing;
          startY.current = atTop ? event.touches[0]!.clientY : null;
        }}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
        // contain: the browser's own pull-to-refresh doesn't fight this one.
        className='relative h-full overflow-y-auto overscroll-y-contain bg-background'
      >
        {children}
      </motion.div>
    </div>
  );
}