From dc80a8ba070c936aa81b7d60e840c05c10a4458e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 3 Jun 2025 11:36:21 -0300
Subject: [PATCH] Add a loading state when loading translations

---
 .svelte-kit/generated/server/internal.js      |  6 +--
 src/lib/components/LoadingTranslations.svelte | 49 +++++++++++++++++++
 src/routes/+layout.svelte                     | 11 +++--
 3 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/LoadingTranslations.svelte
diff --git a/.svelte-kit/generated/server/internal.js b/.svelte-kit/generated/server/internal.js
index f039430..b59a3fa 100644
--- a/.svelte-kit/generated/server/internal.js
+++ b/.svelte-kit/generated/server/internal.js
@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!doctype html>\n<html lang=\"en\">\n  <head>\n    <style>\n      :root {\n        font-family: Inter, Avenir, Helvetica, Arial, sans-serif;\n        font-size: 16px;\n        line-height: 24px;\n        font-weight: 400;\n        font-synthesis: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        -webkit-text-size-adjust: 100%;\n      }\n\n      * {\n        box-sizing: border-box;\n      }\n\n      body {\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        margin: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      #app {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        width: 100%;\n        background-color: #f2f6f5;\n        z-index: 10;\n      }\n\n      input[type='submit'] {\n        width: 100%;\n        font-size: 20px;\n        margin-top: 20px;\n        background-color: #05345f;\n        font-weight: 700;\n        color: white;\n        padding: 10px;\n        -webkit-appearance: none;\n        border-radius: 0;\n      }\n\n      input[type='submit']:hover {\n        cursor: pointer;\n        background-color: black;\n        color: white;\n      }\n\n      body a {\n        text-decoration: none;\n        color: #06345f;\n        border-bottom: 3px solid #06345f;\n      }\n\n      body a:hover {\n        background-color: #06345f;\n        color: #ffffff;\n      }\n\n      :is(h1, h2, h3, h4, h5, h6) {\n        color: #06345f;\n      }\n\n      strong {\n        color: #06345f;\n      }\n\n      ul li::marker {\n        color: #06345f;\n      }\n    </style>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    " + head + "\n  </head>\n  <body data-sveltekit-preload-data=\"hover\">\n    <div style=\"display: contents\">" + body + "</div>\n  </body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "d4zfu8"
+	version_hash: "1wnc9w8"
 };
 
 export async function get_hooks() {
@@ -29,11 +29,11 @@ export async function get_hooks() {
 	let handleFetch;
 	let handleError;
 	let init;
-
+	
 
 	let reroute;
 	let transport;
-
+	
 
 	return {
 		handle,
diff --git a/src/lib/components/LoadingTranslations.svelte b/src/lib/components/LoadingTranslations.svelte
new file mode 100644
index 0000000..8147b0b
--- /dev/null
+++ b/src/lib/components/LoadingTranslations.svelte
@@ -0,0 +1,49 @@
+<div class="loading-container" role="alert" aria-live="polite" aria-busy="true">
+  Loading translations
+  <span class="dot"></span>
+  <span class="dot"></span>
+  <span class="dot"></span>
+</div>
+
+<style>
+  .loading-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: 'Inter', system-ui, sans-serif;
+    font-weight: bold;
+    font-size: 1rem;
+    color: #06345f; /* match your green */
+    user-select: none;
+    margin: 0 auto;
+  }
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    background-color: #06345f;
+    border-radius: 50%;
+    animation: pulse 1.2s ease-in-out infinite;
+  }
+
+  .dot:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+
+  @keyframes pulse {
+    0%,
+    80%,
+    100% {
+      opacity: 0.3;
+      transform: scale(1);
+    }
+    40% {
+      opacity: 1;
+      transform: scale(1.4);
+    }
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ba7769d..6f30239 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,15 @@
 <script>
-  import { locale } from '$lib/translations';
+  import { locale, loading } from '$lib/translations';
   import Header from '$lib/components/Header.svelte';
+  import LoadingTranslations from '$lib/components/LoadingTranslations.svelte';
   export let data;
 
   $: locale.set(data.language);
 </script>
 
-<Header />
-<slot />
+{#if !$loading && $locale !== undefined}
+  <Header />
+  <slot />
+{:else}
+  <LoadingTranslations />
+{/if}
