Loading
La traduction de cette page manque ou n'est plus à jour : elle s'affiche en anglais. Lire en anglais
Wait for initial resources in a subtree before revealing it. Use it when several related pieces of a screen should appear together.
Reveal a profile after its resource settles
import { Catch, Loading, Spinner, Text, resource } from 'kuito';
function Profile() {
const profile = resource(async ({ signal }) => {
const response = await fetch('https://example.com/api/profile', { signal });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return (await response.json()) as { name: string };
});
return <Text>{profile.data.value?.name ?? ''}</Text>;
}
export function Account() {
return (
<Catch fallback={<Text>Profile unavailable</Text>}>
<Loading fallback={<Spinner />}>
<Profile />
</Loading>
</Catch>
);
}Behavior
Children mount while hidden so their resources can start. Loading waits for resources, not tasks. It reveals children after settlement, including failure; pair it with Catch or an explicit error UI. Subsequent refreshes use each resource’s running state.
Continue
Read Async for a complete workflow. See the complete prop reference for types and documented defaults.
Référence
Signatures
(props: LoadingProps): KuitoElementParamètres
| Nom | Type | Requis | Description |
|---|---|---|---|
props | LoadingProps | Oui | — |
Retourne
Props: LoadingProps
Props (props héritées incluses) 3
Généré depuis les déclarations TypeScript publiques : signatures, props et valeurs par défaut viennent de la source vérifiée, les descriptions de sa JSDoc. Aucune valeur par défaut n'est inventée.