Afficher un état de chargement dans la popup pendant browser.storage.sync.get

[Copilot]

L’ouverture de la popup pouvait afficher une liste vide/statique pendant la latence de browser.storage.sync.get, sans feedback utilisateur. Cette PR ajoute un état visuel immédiat jusqu’au premier rendu effectif de renderList.

• Contexte du correctif

  • La récupération asynchrone du stockage peut prendre plusieurs centaines de ms sur profils/connexions lents.
  • L’UI de la popup restait visuellement incomplète durant cette fenêtre.

• Changement apporté (minimal)

  • Ajout d’un contenu par défaut dans ul#domain-list directement dans popup.html :
    • texte Chargement...
    • sémantique d’annonce via role="status"
  • Aucun changement de logique côté popup.js : le placeholder est naturellement remplacé au premier renderList (la liste est vidée puis reconstruite).

• Extrait

<ul id="domain-list">
  <li class="empty-state" role="status">Chargement...</li>
</ul>

• Impact fonctionnel

  • L’utilisateur voit immédiatement un état transitoire explicite au lieu d’une liste vide.
  • Le comportement existant (liste triée, état vide “Aucun domaine…”, suppression/ajout) reste inchangé après chargement.

• Screenshot

  • https://github.com/user-attachments/assets/e6f9f8c7-bbcb-40fb-add4-26ad63b69c91

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Indication manquante lors des requêtes de stockage longues</issue_title>
<issue_description>## Contexte
L'initialisation de la popup fait appel à l'API de stockage asynchrone browser.storage.sync.get.

Problème

Sur les connexions lentes ou lorsque le profil du navigateur est chargé, la synchronisation peut prendre plusieurs centaines de millisecondes. Durant ce temps, l'interface est affichée dans un état statique, non interactif et visuellement incomplet.

Scénario de Reproduction

1. Simuler une latence sur les appels d'API d'extension.
2. Ouvrir la popup.

Comportement Attendu

Un indicateur visuel (texte "Chargement..." ou spinner) doit être présent jusqu'à ce que renderList soit complètement résolu.

Pistes Techniques

Insérer un texte par défaut dans ul#domain-list directement dans le fichier popup.html, qui sera écrasé dès la première itération de la fonction renderList.

Environnement

Toutes plateformes.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Indication manquante lors des requêtes de stockage longues #28

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

Cette PR améliore l’UX de la popup en affichant immédiatement un état transitoire pendant la latence de browser.storage.sync.get, jusqu’au premier rendu effectif de renderList.

Changes:

• Ajout d’un placeholder “Chargement...” dans ul#domain-list au chargement initial.
• Ajout d’une sémantique d’annonce via role="status" sur l’élément placeholder.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

role="status" sur un <li> risque d’être invalide (le rôle implicite de li est listitem, et ARIA-in-HTML restreint généralement les rôles autorisés). Ça peut casser la sémantique de liste pour les lecteurs d’écran. Préférer conserver le <li> sans role et utiliser plutôt un live region via aria-live="polite" (sur #status existant ou sur ul#domain-list), ou déplacer l’élément role="status" hors de la liste.

Suggested change

	<ul id="domain-list"><li class="empty-state" role="status">Chargement...</li></ul>
	<ul id="domain-list"><li class="empty-state">Chargement...</li></ul>

[Copilot]

Le <ul> et son <li> sont désormais sur une seule ligne, ce qui nuit à la lisibilité et complique les diffs. Mettre le <li> sur sa propre ligne (format identique au reste du fichier) rend le HTML plus maintenable.

Suggested change

	<ul id="domain-list"><li class="empty-state" role="status">Chargement...</li></ul>
	<ul id="domain-list">
	<li class="empty-state" role="status">Chargement...</li>
	</ul>