From 2ef05e3d4ef7bbc10ca370bbe4a9953cfe03f1ec Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Sat, 2 Dec 2023 15:56:52 +0100
Subject: [PATCH] feat(site): fullscreen loader

---
 web/src/app.html                     |  5 +++
 web/src/lib/components/Loader.svelte | 57 ++++++++++++++++++++++++++++
 web/src/routes/+layout.svelte        |  2 +
 3 files changed, 64 insertions(+)
 create mode 100644 web/src/lib/components/Loader.svelte
diff --git a/web/src/app.html b/web/src/app.html
index c37a552e..eacb7b37 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -12,5 +12,10 @@
 
 <body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sveltekit-preload-data="hover">
 	%sveltekit.body%
+	<div class='h-full con font-weight-bold overflow-hidden position-absolute'>
+		<div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
+			Loading...
+		</div>
+	</div>
 </body>
 </html>
diff --git a/web/src/lib/components/Loader.svelte b/web/src/lib/components/Loader.svelte
new file mode 100644
index 00000000..c0e203b4
--- /dev/null
+++ b/web/src/lib/components/Loader.svelte
@@ -0,0 +1,57 @@
+<script>
+  import { onMount } from 'svelte'
+
+  let animate = false
+
+  onMount(() => {
+    animate = true
+  })
+</script>
+
+<div class='h-full con font-weight-bold overflow-hidden position-absolute' class:animate>
+  <div class='h-full text d-flex align-items-center justify-content-center text-nowrap text-capitalize'>
+    Loading...
+  </div>
+</div>
+
+<svelte:window on:load={console.log} />
+
+<style>
+  @keyframes transition {
+    0% {
+      background-position: top left;
+      width: 100vw ;
+    }
+    65% {
+      background-position: top left;
+      width: 100vw;
+    }
+    95% {
+      background-position: top right
+    }
+    100% {
+      background-position: top right;
+      width: 0;
+    }
+  }
+  .con {
+    z-index: 90;
+    background-position: top left;
+    width: 100vw;
+  }
+  .animate {
+    animation: 2s transition ease forwards;
+  }
+  .text {
+    font-size: 10rem;
+    color: transparent;
+    font-family: Verdana, sans-serif;
+    width: 100vw;
+    background: linear-gradient(90deg, #fff 50%, #101113 0), linear-gradient(90deg, #101113 50%, #fff 0);
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+    background-position: inherit;
+    -webkit-background-clip: text, padding-box;
+    background-clip: text, padding-box;
+  }
+</style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index c2fb916a..450345be 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script>
   import Footer from '$lib/components/Footer.svelte'
+  import Loader from '$lib/components/Loader.svelte'
   import Navbar from '$lib/components/Navbar.svelte'
 </script>
 
+<Loader />
 <div class='page-wrapper with-transitions position-relative' data-sidebar-type='overlayed-all'>
   <Navbar />
   <div class='overflow-x-hidden content-wrapper h-full overflow-y-scroll position-relative'>
