États de chargement

Lors de la création de hooks personnalisés qui encapsulent SWR, mémorisez la valeur de retour en utilisant useMemo pour éviter des rerenders inutiles. Ceci est particulièrement important lors du retour d’un objet avec plusieurs propriétés :


import { restBaseUrl, useOpenmrsSWR } from '@openmrs/esm-framework';
 
// Bon - valeur de retour mémorisée
export function usePatient(patientUuid?: string) {
  const url = patientUuid ? `${restBaseUrl}/patient/${patientUuid}` : null;
  const { data: response, error, isLoading, isValidating } = useOpenmrsSWR<Patient>(url);
  const patient = response?.data;
  
  return useMemo(
    () => ({
      isLoading,
      isValidating,
      patient,
      patientUuid,
      error,
    }),
    [isLoading, isValidating, error, patient, patientUuid],
  );
}

Utilisez isLoading de SWR pour le chargement initial bloquant, et utilisez isValidating lorsque vous devez afficher un indicateur de rafraîchissement en arrière-plan pendant que les données existantes restent à l’écran. Évitez de traiter chaque revalidation comme un état de chargement complet lorsque des données périmées sont déjà disponibles :


// Bon - le chargement initial et le rafraîchissement en arrière-plan sont distincts
const { data: response, error, isLoading, isValidating } = useOpenmrsSWR<Patient>(url);
const patient = response?.data;
 
if (isLoading) {
  return <SkeletonPlaceholder />;
}
 
if (error) {
  return <ErrorState error={error} />;
}
 
if (!patient) {
  return <EmptyState />;
}
 
return (
  <>
    {isValidating ? <InlineLoading description={t('refreshing', 'Actualisation')} /> : null}
    <PatientBanner patient={patient} />
  </>
);

Utilisez les composants de chargement de Carbon pour fournir un retour visuel pendant la récupération de données :
- Utilisez InlineLoading pour les indicateurs de chargement inline dans les formulaires ou les petits composants
- Utilisez SkeletonText ou SkeletonPlaceholder pour les placeholders de chargement qui correspondent à la mise en page du contenu final
```
import { InlineLoading, SkeletonText } from '@carbon/react';
 
// Indicateur de chargement inline
{isLoading && (
  <InlineLoading description={t('loading', 'Chargement')} />
)}
 
// Placeholder skeleton pour le contenu
{isLoading ? (
  <SkeletonText heading width="60%" />
) : (
  <div>{data?.content}</div>
)}
```

Gérez les données null ou undefined avec élégance en utilisant l’enchaînement optionnel et la coalescence nulle :


// Bon - accès sécurisé aux données
const patientName = data?.patient?.name ?? t('unknownPatient', 'Patient inconnu');
const totalCount = data?.total ?? 0;
 
// Bon - rendu conditionnel
{data?.results?.length > 0 ? (
  <DataTable data={data.results} />
) : (
  <EmptyState />
)}

Lorsque les données peuvent être undefined pendant le chargement initial, utilisez le rendu conditionnel pour éviter les erreurs :


// Bon - gère les données undefined
{data && (
  <PatientBanner patient={data} />
)}
 
// Également bon - utilisation de l'enchaînement optionnel
{data?.patient && (
  <PatientBanner patient={data.patient} />
)}

Utilisez les gardes de type TypeScript dans les fonctions de filtrage pour garantir la sécurité de type lors du filtrage des données invalides :


// Bon - la garde de type garantit que le tableau filtré a le bon type
const validPatients = data?.filter(
  (patient): patient is Patient => 
    patient !== null && patient.person !== null
) ?? [];
 
// TypeScript sait maintenant que validPatients est Patient[], pas (Patient | null)[]
validPatients.forEach(patient => {
  console.log(patient.person.name); // Accès type-safe
});