Crée composant squelette

src/lib/components/budget/SkeletonLoaderBudget.svelte

+<script lang="ts">
+</script>
+
+<div class="animate-pulse-2">
+  <div class="w-full rounded-lg border border-gray-200 bg-white shadow-md">
+    <div class="flex p-4">
+      <div class="w-12 h-12 bg-neutral-300"></div>
+      <div class="ml-2">
+        <div class="w-56 h-6 bg-neutral-300"></div>
+        <div class="w-96 h-4 bg-neutral-300 mt-2"></div>
+      </div>
+    </div>
+    <div class="px-4">
+      <div class="relative flex-col gap-4 border-gray-400">
+        <div class="w-44 h-14 bg-neutral-300"></div>
+        <div
+          class="mt-10 flex flex-col items-center justify-between sm:flex-row"
+        >
+          <div class="w-96 h-7 bg-neutral-300"></div>
+          <div class="w-20 h-4 bg-neutral-300"></div>
+        </div>
+        <div class="w-full h-64 mt-4 bg-neutral-300"></div>
+      </div>
+    </div>
+    <div class="w-full h-40 mt-10 bg-neutral-300"></div>
+    <div class="flex flex-col items-end px-4 py-2">
+      <div class="w-48 h-4 bg-neutral-300"></div>
+      <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
+    </div>
+  </div>
+  <div class="mt-4 rounded-lg border border-gray-200 bg-white shadow-md">
+    <div class="flex p-4">
+      <div class="w-12 h-12 bg-neutral-300"></div>
+      <div class="ml-2">
+        <div class="w-56 h-6 bg-neutral-300"></div>
+        <div class="w-40 h-4 bg-neutral-300 mt-2"></div>
+      </div>
+    </div>
+    <div class="w-96 h-14 mx-4 bg-neutral-300"></div>
+    <div class="flex flex-col items-end px-4 py-2">
+      <div class="w-48 h-4 bg-neutral-300"></div>
+      <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
+    </div>
+  </div>
+</div>

src/routes/+page.svelte

@@ -37,6 +37,7 @@
   import BudgetSimulationSharingModal from "$lib/components/BudgetSimulationSharingModal.svelte"
   import CopyClipboard from "$lib/components/CopyClipboard.svelte"
   import ModificationsPanel from "$lib/components/ModificationsPanel.svelte"
+  import SkeletonLoaderBudget from "$lib/components/budget/SkeletonLoaderBudget.svelte"
   import StaticAggregates from "$lib/components/budget/StaticAggregates.svelte"
   import TestCaseCompareView from "$lib/components/test_cases/TestCaseCompareView.svelte"
   import TestCaseEdit from "$lib/components/test_cases/TestCaseEdit.svelte"
@@ -1410,6 +1411,7 @@
                         <!--Panneau indicateur que d'autres dispositifs sont disponibles en budgétaire-->
                         <WithoutBudgetCard {displayMode} {variable} />
                       {:else if $budgetSimulation === undefined && !budgetVariablesNameRelated.has(displayMode.parametersVariableName)}
+                        <!--Skeleton Loader qui apparait quand le budget charge-->
                         {@const budgetVariableName =
                           displayMode.parametersVariableName !== undefined
                             ? budgetVariableNameByVariableName[
@@ -1435,56 +1437,7 @@
                         <div class="mx-4 mb-2 text-2xl font-bold md:mx-0">
                           {budgetVariable?.label}
                         </div>
-                        <div class="animate-pulse-2">
-                          <div
-                            class="w-full rounded-lg border border-gray-200 bg-white shadow-md"
-                          >
-                            <div class="flex p-4">
-                              <div class="w-12 h-12 bg-neutral-300"></div>
-                              <div class="ml-2">
-                                <div class="w-56 h-6 bg-neutral-300"></div>
-                                <div class="w-96 h-4 bg-neutral-300 mt-2"></div>
-                              </div>
-                            </div>
-                            <div class="px-4">
-                              <div
-                                class="relative flex-col gap-4 border-gray-400"
-                              >
-                                <div class="w-44 h-14 bg-neutral-300"></div>
-                                <div
-                                  class="mt-10 flex flex-col items-center justify-between sm:flex-row"
-                                >
-                                  <div class="w-96 h-7 bg-neutral-300"></div>
-                                  <div class="w-20 h-4 bg-neutral-300"></div>
-                                </div>
-                                <div
-                                  class="w-full h-64 mt-4 bg-neutral-300"
-                                ></div>
-                              </div>
-                            </div>
-                            <div class="w-full h-40 mt-10 bg-neutral-300"></div>
-                            <div class="flex flex-col items-end px-4 py-2">
-                              <div class="w-48 h-4 bg-neutral-300"></div>
-                              <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
-                            </div>
-                          </div>
-                          <div
-                            class="mt-4 rounded-lg border border-gray-200 bg-white shadow-md"
-                          >
-                            <div class="flex p-4">
-                              <div class="w-12 h-12 bg-neutral-300"></div>
-                              <div class="ml-2">
-                                <div class="w-56 h-6 bg-neutral-300"></div>
-                                <div class="w-40 h-4 bg-neutral-300 mt-2"></div>
-                              </div>
-                            </div>
-                            <div class="w-96 h-14 mx-4 bg-neutral-300"></div>
-                            <div class="flex flex-col items-end px-4 py-2">
-                              <div class="w-48 h-4 bg-neutral-300"></div>
-                              <div class="w-40 h-4 mt-1 bg-neutral-300"></div>
-                            </div>
-                          </div>
-                        </div>
+                        <SkeletonLoaderBudget />
                       {:else if $budgetSimulation !== undefined && $budgetSimulation.errors != null && $budgetSimulation.errors.length > 0}
                         <div
                           class="w-fit mx-auto md:mt-32 flex flex-col items-center gap-10 p-10 bg-white rounded-lg border border-gray-200 shadow-md"