From 203df7576c1706a5fa92d166aa5d0c632d1a8a49 Mon Sep 17 00:00:00 2001
From: MasutaYunikon <quentinmail974@gmail.com>
Date: Tue, 14 Apr 2026 20:30:18 +0200
Subject: [PATCH] fix: ajout d'un loader sur certaines pages pour pas avoir des
 trucs par default qui s'affiche

---
 src/views/settings/CatalogueView.vue       |  67 +++---
 src/views/settings/MediaManagementView.vue | 249 +++++++++++----------
 2 files changed, 168 insertions(+), 148 deletions(-)

diff --git a/src/views/settings/CatalogueView.vue b/src/views/settings/CatalogueView.vue
index 2a8b087..bfc8ab7 100644
--- a/src/views/settings/CatalogueView.vue
+++ b/src/views/settings/CatalogueView.vue
@@ -8,38 +8,47 @@
       </p>
     </div>
 
-    <!-- Bannière données manquantes -->
-    <div
-        v-if="status.empty"
-        class="border border-accent/30 bg-accent-muted rounded-lg p-4 flex items-center justify-between gap-4"
-    >
-      <div>
-        <p class="text-xs text-accent font-medium mb-1">Données manquantes</p>
-        <p class="text-sm text-secondary">
-          {{ status.exists ? 'Le catalogue est vide.' : 'Aucun catalogue trouvé.' }}
-          Téléchargez les données pour utiliser FanKarr.
+    <!-- Loading -->
+    <div v-if="!loaded" class="flex items-center justify-center gap-2 py-16 text-muted text-sm">
+      <div class="w-4 h-4 border border-border border-t-accent rounded-full animate-spin" />
+    </div>
+
+    <template v-else>
+
+      <!-- Bannière données manquantes -->
+      <div
+          v-if="status.empty"
+          class="border border-accent/30 bg-accent-muted rounded-lg p-4 flex items-center justify-between gap-4"
+      >
+        <div>
+          <p class="text-xs text-accent font-medium mb-1">Données manquantes</p>
+          <p class="text-sm text-secondary">
+            {{ status.exists ? 'Le catalogue est vide.' : 'Aucun catalogue trouvé.' }}
+            Téléchargez les données pour utiliser FanKarr.
+          </p>
+        </div>
+        <button @click="update" :disabled="updating" class="btn-primary whitespace-nowrap">
+          {{ updating ? 'Téléchargement...' : 'Télécharger' }}
+        </button>
+      </div>
+
+      <!-- Statut -->
+      <div class="settings-card">
+        <p class="text-xs text-muted mb-1">Statut</p>
+        <p class="text-sm text-primary font-medium">
+          {{ status.empty ? 'Aucune donnée chargée' : `${status.count} séries disponibles` }}
         </p>
       </div>
-      <button @click="update" :disabled="updating" class="btn-primary whitespace-nowrap">
-        {{ updating ? 'Téléchargement...' : 'Télécharger' }}
-      </button>
-    </div>
 
-    <!-- Statut -->
-    <div class="settings-card">
-      <p class="text-xs text-muted mb-1">Statut</p>
-      <p class="text-sm text-primary font-medium">
-        {{ status.empty ? 'Aucune donnée chargée' : `${status.count} séries disponibles` }}
-      </p>
-    </div>
+      <!-- Action -->
+      <div>
+        <button @click="update" :disabled="updating" class="btn-primary">
+          {{ updating ? 'Mise à jour...' : 'Mettre à jour maintenant' }}
+        </button>
+        <p class="text-xs text-muted mt-2">Force la synchronisation sans attendre le cache de 6h.</p>
+      </div>
 
-    <!-- Action -->
-    <div>
-      <button @click="update" :disabled="updating" class="btn-primary">
-        {{ updating ? 'Mise à jour...' : 'Mettre à jour maintenant' }}
-      </button>
-      <p class="text-xs text-muted mt-2">Force la synchronisation sans attendre le cache de 6h.</p>
-    </div>
+    </template>
 
   </div>
 </template>
@@ -51,11 +60,13 @@ import { useToast } from '@/composables/useToast'
 const { add: toast } = useToast()
 
 const updating = ref(false)
+const loaded   = ref(false)
 const status   = ref({ exists: false, count: 0, empty: true })
 
 onMounted(async () => {
   const res = await fetch('/api/torrents/status', { credentials: 'include' })
   if (res.ok) status.value = await res.json()
+  loaded.value = true
 })
 
 async function update() {
diff --git a/src/views/settings/MediaManagementView.vue b/src/views/settings/MediaManagementView.vue
index f989b6b..cd2e04f 100644
--- a/src/views/settings/MediaManagementView.vue
+++ b/src/views/settings/MediaManagementView.vue
@@ -6,136 +6,143 @@
       <p class="text-sm text-muted mt-1">Configuration des dossiers et du comportement d'import.</p>
     </div>
 
-    <!-- Dossiers -->
-    <div class="settings-card flex flex-col gap-5">
-
-      <div>
-        <div class="flex items-center gap-2 mb-1.5">
-          <label class="settings-label">Dossier téléchargements</label>
-          <span v-if="isDocker" class="text-[10px] text-accent border border-accent/40 px-1.5 py-0.5 rounded">Docker</span>
-        </div>
-        <button @click="openPicker('completePath')" class="settings-input text-left font-mono truncate w-full"
-                :class="isRootPath(form.completePath) ? 'text-yellow-500 border-yellow-500/40' : form.completePath ? 'text-primary' : 'text-muted'">
-          {{ form.completePath || '/' }}
-        </button>
-        <p v-if="isRootPath(form.completePath)" class="text-xs text-yellow-500 mt-1.5 flex items-center gap-1">
-          <span>⚠</span> Chemin non configuré — cliquez pour sélectionner un dossier
-        </p>
-        <p v-else class="text-xs text-muted mt-1.5">Dossier où sont déposés les fichiers téléchargés</p>
-      </div>
-
-      <div>
-        <div class="flex items-center gap-2 mb-1.5">
-          <label class="settings-label">Médiathèque Fankai</label>
-          <span v-if="isDocker" class="text-[10px] text-accent border border-accent/40 px-1.5 py-0.5 rounded">Docker</span>
-        </div>
-        <button @click="openPicker('mediaPath')" class="settings-input text-left font-mono truncate w-full"
-                :class="isRootPath(form.mediaPath) ? 'text-yellow-500 border-yellow-500/40' : form.mediaPath ? 'text-primary' : 'text-muted'">
-          {{ form.mediaPath || '/' }}
-        </button>
-        <p v-if="isRootPath(form.mediaPath)" class="text-xs text-yellow-500 mt-1.5 flex items-center gap-1">
-          <span>⚠</span> Chemin non configuré — cliquez pour sélectionner un dossier
-        </p>
-        <p v-else class="text-xs text-muted mt-1.5">Dossier racine de votre médiathèque (Jellyfin, Kodi, Plex…)</p>
-      </div>
-
+    <!-- Loading -->
+    <div v-if="!loaded" class="flex items-center justify-center gap-2 py-16 text-muted text-sm">
+      <div class="w-4 h-4 border border-border border-t-accent rounded-full animate-spin" />
     </div>
 
-    <!-- Alerte globale si un des deux paths est sur / -->
-    <div v-if="hasUnconfiguredPaths" class="flex items-start gap-3 px-4 py-3 rounded-lg border border-yellow-500/40 bg-yellow-500/5">
-      <span class="text-yellow-500 text-sm mt-0.5">⚠</span>
-      <div class="flex flex-col gap-0.5">
-        <p class="text-sm text-yellow-500 font-medium">Chemins non configurés</p>
+    <template v-else>
+      <div class="settings-card flex flex-col gap-5">
+
+        <div>
+          <div class="flex items-center gap-2 mb-1.5">
+            <label class="settings-label">Dossier téléchargements</label>
+            <span v-if="isDocker" class="text-[10px] text-accent border border-accent/40 px-1.5 py-0.5 rounded">Docker</span>
+          </div>
+          <button @click="openPicker('completePath')" class="settings-input text-left font-mono truncate w-full"
+                  :class="isRootPath(form.completePath) ? 'text-yellow-500 border-yellow-500/40' : form.completePath ? 'text-primary' : 'text-muted'">
+            {{ form.completePath || '/' }}
+          </button>
+          <p v-if="isRootPath(form.completePath)" class="text-xs text-yellow-500 mt-1.5 flex items-center gap-1">
+            <span>⚠</span> Chemin non configuré — cliquez pour sélectionner un dossier
+          </p>
+          <p v-else class="text-xs text-muted mt-1.5">Dossier où sont déposés les fichiers téléchargés</p>
+        </div>
+
+        <div>
+          <div class="flex items-center gap-2 mb-1.5">
+            <label class="settings-label">Médiathèque Fankai</label>
+            <span v-if="isDocker" class="text-[10px] text-accent border border-accent/40 px-1.5 py-0.5 rounded">Docker</span>
+          </div>
+          <button @click="openPicker('mediaPath')" class="settings-input text-left font-mono truncate w-full"
+                  :class="isRootPath(form.mediaPath) ? 'text-yellow-500 border-yellow-500/40' : form.mediaPath ? 'text-primary' : 'text-muted'">
+            {{ form.mediaPath || '/' }}
+          </button>
+          <p v-if="isRootPath(form.mediaPath)" class="text-xs text-yellow-500 mt-1.5 flex items-center gap-1">
+            <span>⚠</span> Chemin non configuré — cliquez pour sélectionner un dossier
+          </p>
+          <p v-else class="text-xs text-muted mt-1.5">Dossier racine de votre médiathèque (Jellyfin, Kodi, Plex…)</p>
+        </div>
+
+      </div>
+
+      <!-- Alerte globale si un des deux paths est sur / -->
+      <div v-if="hasUnconfiguredPaths" class="flex items-start gap-3 px-4 py-3 rounded-lg border border-yellow-500/40 bg-yellow-500/5">
+        <span class="text-yellow-500 text-sm mt-0.5">⚠</span>
+        <div class="flex flex-col gap-0.5">
+          <p class="text-sm text-yellow-500 font-medium">Chemins non configurés</p>
+          <p class="text-xs text-muted">
+            L'import automatique est désactivé tant que les dossiers ne sont pas configurés.
+            Configurez-les ci-dessus avant de sauvegarder.
+          </p>
+        </div>
+      </div>
+
+      <!-- Mode import -->
+      <div class="settings-card flex flex-col gap-2">
+        <label class="settings-label">Mode d'import</label>
+        <div class="flex gap-2">
+          <button
+              @click="form.organizeMode = 'hardlink'"
+              class="px-4 py-2 text-xs rounded-lg border transition-colors"
+              :class="form.organizeMode === 'hardlink'
+            ? 'border-accent text-accent bg-accent-muted'
+            : 'border-border text-muted hover:border-secondary'"
+          >
+            Hardlink
+          </button>
+          <button
+              @click="form.organizeMode = 'copy'"
+              class="px-4 py-2 text-xs rounded-lg border transition-colors"
+              :class="form.organizeMode === 'copy'
+            ? 'border-accent text-accent bg-accent-muted'
+            : 'border-border text-muted hover:border-secondary'"
+          >
+            Copier
+          </button>
+          <button
+              @click="form.organizeMode = 'move'"
+              class="px-4 py-2 text-xs rounded-lg border transition-colors"
+              :class="form.organizeMode === 'move'
+            ? 'border-accent text-accent bg-accent-muted'
+            : 'border-border text-muted hover:border-secondary'"
+          >
+            Déplacer
+          </button>
+        </div>
         <p class="text-xs text-muted">
-          L'import automatique est désactivé tant que les dossiers ne sont pas configurés.
-          Configurez-les ci-dessus avant de sauvegarder.
+          <span class="text-primary">Hardlink recommandé</span> — le fichier reste dans le client torrent pour le ratio
         </p>
       </div>
-    </div>
 
-    <!-- Mode import -->
-    <div class="settings-card flex flex-col gap-2">
-      <label class="settings-label">Mode d'import</label>
-      <div class="flex gap-2">
-        <button
-            @click="form.organizeMode = 'hardlink'"
-            class="px-4 py-2 text-xs rounded-lg border transition-colors"
-            :class="form.organizeMode === 'hardlink'
-            ? 'border-accent text-accent bg-accent-muted'
-            : 'border-border text-muted hover:border-secondary'"
-        >
-          Hardlink
-        </button>
-        <button
-            @click="form.organizeMode = 'copy'"
-            class="px-4 py-2 text-xs rounded-lg border transition-colors"
-            :class="form.organizeMode === 'copy'
-            ? 'border-accent text-accent bg-accent-muted'
-            : 'border-border text-muted hover:border-secondary'"
-        >
-          Copier
-        </button>
-        <button
-            @click="form.organizeMode = 'move'"
-            class="px-4 py-2 text-xs rounded-lg border transition-colors"
-            :class="form.organizeMode === 'move'
-            ? 'border-accent text-accent bg-accent-muted'
-            : 'border-border text-muted hover:border-secondary'"
-        >
-          Déplacer
-        </button>
+      <!-- Toggles -->
+      <div class="settings-card flex flex-col gap-5">
+
+        <SettingsToggle
+            v-model="form.autoImport"
+            label="Import automatique"
+            description="Importer automatiquement dès qu'un téléchargement est terminé. Vérifie toutes les 5 minutes."
+        />
+
+        <SettingsToggle
+            v-model="form.nfoSupport"
+            label="NFO / Métadonnées"
+            description="Télécharge les NFO et images depuis GitLab lors de l'import (Kodi, Infuse, etc.)."
+        />
+
+        <SettingsToggle
+            v-if="form.organizeMode === 'move'"
+            v-model="form.deleteTorrentOnMove"
+            label="Supprimer le torrent après déplacement"
+            description="Supprime automatiquement le torrent du client après un import en mode Déplacer."
+        />
+
+        <SettingsToggle
+            v-model="form.autoUnimportMissing"
+            label="Désimporter si fichier manquant"
+            description="Si un fichier importé n'est plus trouvé sur le disque lors du scan, il est automatiquement retiré de la bibliothèque."
+        />
+
       </div>
-      <p class="text-xs text-muted">
-        <span class="text-primary">Hardlink recommandé</span> — le fichier reste dans le client torrent pour le ratio
-      </p>
-    </div>
 
-    <!-- Toggles -->
-    <div class="settings-card flex flex-col gap-5">
-
-      <SettingsToggle
-          v-model="form.autoImport"
-          label="Import automatique"
-          description="Importer automatiquement dès qu'un téléchargement est terminé. Vérifie toutes les 5 minutes."
-      />
-
-      <SettingsToggle
-          v-model="form.nfoSupport"
-          label="NFO / Métadonnées"
-          description="Télécharge les NFO et images depuis GitLab lors de l'import (Kodi, Infuse, etc.)."
-      />
-
-      <SettingsToggle
-          v-if="form.organizeMode === 'move'"
-          v-model="form.deleteTorrentOnMove"
-          label="Supprimer le torrent après déplacement"
-          description="Supprime automatiquement le torrent du client après un import en mode Déplacer."
-      />
-
-      <SettingsToggle
-          v-model="form.autoUnimportMissing"
-          label="Désimporter si fichier manquant"
-          description="Si un fichier importé n'est plus trouvé sur le disque lors du scan, il est automatiquement retiré de la bibliothèque."
-      />
-
-    </div>
-
-    <!-- Actions -->
-    <div class="flex items-center gap-3">
-      <button @click="save" :disabled="saving" class="btn-primary">
-        {{ saving ? '...' : 'Sauvegarder' }}
-      </button>
-      <button @click="scan" :disabled="scanning" class="btn-secondary">
-        {{ scanning ? 'Scan...' : 'Analyser médiathèque' }}
-      </button>
-      <span
-          v-if="scanResult"
-          class="text-xs"
-          :class="scanResult.added > 0 ? 'text-green-400' : 'text-muted'"
-      >
+      <!-- Actions -->
+      <div class="flex items-center gap-3">
+        <button @click="save" :disabled="saving" class="btn-primary">
+          {{ saving ? '...' : 'Sauvegarder' }}
+        </button>
+        <button @click="scan" :disabled="scanning" class="btn-secondary">
+          {{ scanning ? 'Scan...' : 'Analyser médiathèque' }}
+        </button>
+        <span
+            v-if="scanResult"
+            class="text-xs"
+            :class="scanResult.added > 0 ? 'text-green-400' : 'text-muted'"
+        >
         {{ scanResult.found }} fichiers · {{ scanResult.added }} ajoutés
       </span>
-    </div>
+      </div>
+
+    </template><!-- fin v-else loaded -->
 
   </div>
 
@@ -159,6 +166,7 @@ const { add: toast } = useToast()
 const saving     = ref(false)
 const scanning   = ref(false)
 const isDocker   = ref(false)
+const loaded     = ref(false)
 const scanResult = ref<{ found: number; added: number } | null>(null)
 
 const form = ref({
@@ -204,6 +212,7 @@ onMounted(async () => {
   if (settingsRes.ok) Object.assign(form.value, await settingsRes.json())
   if (systemRes.ok)   isDocker.value = (await systemRes.json()).isDocker
   if (infoRes.ok) picker.value.currentPath = (await infoRes.json()).defaultPath ?? '/'
+  loaded.value = true
 })
 
 async function save() {