From 31826146c5b0114244fef176c6822445428f2495 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 12 Jul 2022 16:39:26 +0200
Subject: [PATCH] feat: initial loading screen

---
 src/routes/__layout.svelte | 13 +++++--
 src/routes/_loading.svelte | 74 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/_loading.svelte

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index bae275346e..ff4976ffd5 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -7,10 +7,13 @@
     import { page } from '$app/stores';
     import { user } from '$lib/stores/user';
     import { onMount } from 'svelte';
-    import Notifications from '$lib/layout/notifications.svelte';
     import { base } from '$app/paths';
     import { browser } from '$app/env';
     import { app } from '$lib/stores/app';
+    import Notifications from '$lib/layout/notifications.svelte';
+    import Loading from './_loading.svelte';
+
+    let loaded = false;
 
     if (browser) {
         window.GOOGLE_ANALYTICS = import.meta.env.VITE_GOOGLE_ANALYTICS?.toString() ?? false;
@@ -27,6 +30,8 @@
             }
         } catch (error) {
             await goto(`${base}/login`);
+        } finally {
+            loaded = true;
         }
     });
 
@@ -67,4 +72,8 @@
 
 <Notifications />
 
-<slot />
+{#if loaded}
+    <slot />
+{:else}
+    <Loading />
+{/if}
diff --git a/src/routes/_loading.svelte b/src/routes/_loading.svelte
new file mode 100644
index 0000000000..50c1b1526b
--- /dev/null
+++ b/src/routes/_loading.svelte
@@ -0,0 +1,74 @@
+<script>
+    import { fade } from 'svelte/transition';
+    import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
+</script>
+
+<div class="load-screen" out:fade>
+    <div class="animation">
+        <div />
+        <div />
+        <div />
+        <div />
+    </div>
+    <img src={AppwriteLogo} alt="Appwrite Light Logo" width="132" height="34" />
+</div>
+
+<style lang="scss">
+    .load-screen {
+        z-index: 100000;
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        background-color: hsl(var(--p-body-bg-color));
+        top: 0;
+
+        .animation {
+            position: absolute;
+            top: 45%;
+            left: 50%;
+            transform: translate(-50%, -50%) translateZ(1px);
+            width: 140px;
+            height: 140px;
+
+            div {
+                box-sizing: border-box;
+                display: block;
+                position: absolute;
+                width: 124px;
+                height: 124px;
+                margin: 10px;
+                border: 10px solid hsl(var(--color-primary-200));
+                border-radius: 50%;
+                animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+                border-color: hsl(var(--color-primary-200)) transparent transparent transparent;
+
+                &:nth-child(1) {
+                    animation-delay: -0.45s;
+                }
+                &:nth-child(2) {
+                    animation-delay: -0.3s;
+                }
+                &:nth-child(3) {
+                    animation-delay: -0.15s;
+                }
+            }
+        }
+
+        @keyframes animation {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        img {
+            position: absolute;
+            max-width: 100%;
+            bottom: 60px;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+</style>