Skip to content

Commit cfe2ca3

Browse files
bartlomiejuclaude
andcommitted
docs: document _freshIndicator for links and form submissions
Adds a "Loading indicators" section to the partials docs covering the _freshIndicator property, including the new submitter-over-form precedence behavior for form submissions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 08c43b2 commit cfe2ca3

1 file changed

Lines changed: 60 additions & 0 deletions

File tree

docs/latest/advanced/partials.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,66 @@ Partial updates can be animated using the browser's
208208
alongside `f-client-nav` to enable smooth animated transitions between pages
209209
with zero JavaScript animation code.
210210

211+
## Loading indicators
212+
213+
When a partial request is in flight, you may want to show a loading spinner or
214+
disable a button. Fresh supports this through the `_freshIndicator` property.
215+
216+
Attach an object with a `value` property to any element that triggers a partial
217+
navigation. Fresh will set `value` to `true` when the request starts and back to
218+
`false` when it completes (or fails).
219+
220+
```tsx
221+
import { useSignal } from "@preact/signals";
222+
223+
function NavLink() {
224+
const loading = useSignal(false);
225+
226+
return (
227+
<a
228+
href="/next-page"
229+
f-partial="/partials/next-page"
230+
ref={(el) => {
231+
if (el) el._freshIndicator = loading;
232+
}}
233+
>
234+
{loading.value ? "Loading..." : "Go"}
235+
</a>
236+
);
237+
}
238+
```
239+
240+
This works for links, forms, and submit buttons. For form submissions, Fresh
241+
checks the submitter element (e.g. the clicked button) first, then falls back to
242+
the form element itself. This lets you show per-button indicators when a form has
243+
multiple submit buttons.
244+
245+
```tsx
246+
import { useSignal } from "@preact/signals";
247+
248+
function MyForm() {
249+
const saving = useSignal(false);
250+
251+
return (
252+
<form action="/save" f-partial="/partials/save">
253+
{/* indicator is on the button, not the form */}
254+
<button
255+
type="submit"
256+
ref={(el) => {
257+
if (el) el._freshIndicator = saving;
258+
}}
259+
>
260+
{saving.value ? "Saving..." : "Save"}
261+
</button>
262+
</form>
263+
);
264+
}
265+
```
266+
267+
> [info]: Any object with a mutable `value` property works — Preact signals are
268+
> the most convenient choice because they automatically re-render the component
269+
> when the value changes.
270+
211271
## Bypassing or disabling Partials
212272

213273
If you want to exempt a particular element from triggering a partial request

0 commit comments

Comments
 (0)