Pull to refresh

Pull to refresh (COMPONENT_SPEC §38) refreshes a scrolling list: pulled down at its top, an indicator follows the finger, and a release past the threshold asks for a refresh. It is Compose's PullToRefreshBox: the pull counts half and slows past the 80dp threshold (its tension curve, ported to m3e-motion), the indicator springs back, or rests at the threshold and spins while the app refreshes. The content is the scroll container, with overscroll contained so the browser's own pull-to-refresh never starts.

Pulls come from touch and pen only, never from a mouse drag or wheel. The keyboard path is a visible Refresh button, as in every Compose sample (here the app bar's Trigger Refresh): it calls the same refresh. Set refreshing from the refresh event and clear it when done; these demos wait 5 seconds and add five items, like the samples.

Arrow indicator (element)

<m3e-pull-to-refresh> draws Compose's default indicator: a 40dp circle with an arrow that grows from 40% of the threshold and turns fully opaque at it, then a circular progress while refreshing.

Title

  • Item 15
  • Item 14
  • Item 13
  • Item 12
  • Item 11
  • Item 10
  • Item 9
  • Item 8
  • Item 7
  • Item 6
  • Item 5
  • Item 4
  • Item 3
  • Item 2
  • Item 1

Loading indicator (element)

indicator="loading-indicator" is Compose's PullToRefreshDefaults.LoadingIndicator: a contained loading indicator that morphs with the pull, turns past the threshold and keeps morphing while refreshing. The element drives <m3e-loading-indicator> children and loads that entry on first use.

Title

  • Item 15
  • Item 14
  • Item 13
  • Item 12
  • Item 11
  • Item 10
  • Item 9
  • Item 8
  • Item 7
  • Item 6
  • Item 5
  • Item 4
  • Item 3
  • Item 2
  • Item 1

React

<PullToRefresh isRefreshing onRefresh indicator> renders the same DOM as the element; the app bar's button calls the same onRefresh.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): pulltorefresh/PullToRefresh.kt (PullToRefreshDefaults L449–502, IndicatorBox L521–567, the arrow and spinner L582–616 and L788–922, the private sizes L890–914, PullToRefreshStateImpl L765–771), PullToRefreshSamples.kt (the "Trigger Refresh" button, L90–91), LoadingIndicator.kt, ProgressIndicator.kt and animation-core Animatable.kt (L122–123, L229), AnimationSpec.kt and VectorizedAnimationSpec.kt. There is no PullToRefreshTokens.kt and no m3.material.io page (L92), so the values Compose renders are generated into components/pull-to-refresh-defaults.css (lines in PARITY.md); the drag math is checked against a JVM run of the vendored code.

SOURCES register #55, #85 (the "Refresh" name, DECISIONS D19 (22)) and #86 (the arrow head at density 1, D19 (23)).