Composants

<Defer> produit du contenu différé ; <Slot> réserve un emplacement pour un fragment nommé.

<Defer>#

Placez les parties lentes dans <Defer>. fallback reste visible en attendant ; target permet de choisir un emplacement nommé. Le contenu peut recevoir un signal pour annuler les requêtes.

import { Defer } from "@vincle/flow";

<Defer fallback={<p>Loading dashboard…</p>}>
  <HeavyDashboard />
</Defer>;

<Defer fallback={<p>Loading dashboard…</p>}>{(signal) => <HeavyDashboard signal={signal} />}</Defer>

Modes de fusion#

merge indique comment le fragment est inséré : remplacement, ajout ou insertion relative, selon les capacités de l’adaptateur.

<Slot> : point d’insertion nommé#

Un <Slot name="…"> est un emplacement passif. Un <Defer target="…"> correspondant fournit le résultat. Il ne crée pas un second contenu de repli au même emplacement.

import { Defer, Slot } from "@vincle/flow";
import { Results } from "./results";

function SearchPage() {
  return (
    <>
      <main>
        <h1>Search results</h1>
        <Slot name="results">
          <p>Loading results…</p>
        </Slot>
      </main>
      <Defer target="results">
        <Results />
      </Defer>
    </>
  );
}

Types de contenu#

Le contenu peut être une valeur rendable, une promesse, une factory asynchrone ou un itérable asynchrone. Chaque valeur d’une séquence peut devenir une mise à jour.

Props#

Configurez target, fallback, merge et le délai selon la région. Conservez des identifiants valides et uniques.