SayUI
← Library→ Turn this into a prompt
Status & loading

Pull to Refresh

Pull a list past a threshold from the top to trigger a reload—mobile muscle memory.

Also known as swipe down refresh · PTR · refresh control

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Pull to Refresh".

Add pull-to-refresh on the feed: threshold pull shows a spinner, overscroll-behavior-y: contain so the browser doesn’t hijack, explicit Refresh button for accessibility, and a short toast or count of new items when done.

Anatomy:
- pull area: The region that stretches from the top.
- threshold: Release past this distance to fire refresh.
- infinite scroll / load more: The sibling pattern at the bottom of the list.

Preferred API / pattern: `custom touch handlers / pull-to-refresh libs`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Gesture-only refresh
  • ○Avoid: Browser native reload wins the gesture
  • ○Avoid: Silent completion
  • ○Avoid: Load-more without throttle

In plain wordsHow people search for it

“yank the list down to reload it”“pull down until a spinner shows, let go, and it reloads”“the refresh gesture at the top of a mobile feed”

AnatomyOpen for part names

pull area
The region that stretches from the top.
threshold
Release past this distance to fire refresh.
infinite scroll / load more
The sibling pattern at the bottom of the list.

How to write itOpen for stack patterns

Web (HTML/CSS)touch + overscroll-behavior / custom PTR
React + Tailwind + shadcn/uicustom touch handlers / pull-to-refresh libs
SwiftUIrefreshable { }
Ant DesignList customLoad / mobile patterns

Notes

Native on iOS/Android; on web, browser PTR can steal the gesture—use overscroll-behavior-y: contain. Always offer a non-gesture refresh (button) for keyboard and AT. Tell people what changed when done. Infinite scroll at the bottom is related but separate—throttle its requests.

Common mistakesHumans and models trip here

  • Gesture-only refresh: keyboard/AT users have no path—add a button.
  • Browser native reload wins the gesture: set overscroll-behavior.
  • Silent completion: users don’t know if anything new arrived.
  • Load-more without throttle: five requests while flinging to the bottom.

More failure symptoms on AI broke it.

Related patterns

Spinner / Activity IndicatorA compact motion indicator that something is busy—usually circular or system-native.Masonry LayoutEqual-width, variable-height cards packed into columns with no shared row line.PaginationControls that split large result sets into numbered pages.Safe Area InsetsThe inset region free of notches, rounded corners, and the home indicator.

Spotted a wrong name or missing pattern?

Message on X