diff --git a/src/lib/components/budget/SkeletonLoaderBudget.svelte b/src/lib/components/budget/SkeletonLoaderBudget.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a633b4ba724aa53c3eecd2fae80ec71d4370a75d
--- /dev/null
+++ b/src/lib/components/budget/SkeletonLoaderBudget.svelte
@@ -0,0 +1,45 @@
+<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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b401881091b294d8ed53cf08c7bde53bfa1e88e3..4e35cc8dc61e498cb56ba52e55da5544d18c8ca3 100644
--- a/src/routes/+page.svelte
+++ b/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"