From 2045db37b40b32ce9a59b65adcee8cc73a02c819 Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Tue, 10 Dec 2024 18:32:26 -0500
Subject: [PATCH] an idea

---
 src/app.html           |  25 +++-----
 static/css/loading.css | 126 +++++++++++++++++++++++++----------------
 2 files changed, 85 insertions(+), 66 deletions(-)

diff --git a/src/app.html b/src/app.html
index 206daa685..81e46bf1f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -157,24 +157,15 @@
         </script>
         <div id="svelte">%sveltekit.body%</div>
         <div class="page-loader">
-            <div class="animation">
-                <div></div>
-                <div></div>
-                <div></div>
-                <div></div>
+            <div class="content">
+                <img
+                    src="/console/logos/appwrite-icon.svg"
+                    width="40"
+                    height="40"
+                    class="logo-dark"
+                    alt="Appwrite Logo" />
+                <span class="message">Loading Cloud...</span>
             </div>
-            <img
-                src="/console/images/appwrite-logo-light.svg"
-                width="120"
-                height="22"
-                class="logo-light"
-                alt="Appwrite Logo" />
-            <img
-                src="/console/images/appwrite-logo-dark.svg"
-                width="120"
-                height="22"
-                class="logo-dark"
-                alt="Appwrite Logo" />
         </div>
     </body>
 </html>
diff --git a/static/css/loading.css b/static/css/loading.css
index 38f0dd187..bce628617 100644
--- a/static/css/loading.css
+++ b/static/css/loading.css
@@ -8,7 +8,7 @@ body {
 }
 
 .theme-dark .page-loader {
-    --p-page-loader-background-color: #000;
+    --p-page-loader-background-color: hsl(240 5.7% 10.4%);
 }
 .theme-light .page-loader {
     --p-page-loader-background-color: #fff;
@@ -19,68 +19,96 @@ body {
 }
 
 .page-loader {
+    --message-font-family: 'Source Code Pro';
+
     visibility: hidden;
     opacity: 0;
     z-index: 100000;
     position: fixed;
-    height: 100%;
-    width: 100%;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--p-page-loader-background-color);
-    top: 0;
-    transition: all 0.2s ease-in-out;
-}
+    transition: all 0.3s ease-in-out 0.35s;
 
-.page-loader img {
-    visibility: hidden;
-    position: absolute;
-    max-width: 100%;
-    bottom: 60px;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    img {
+        max-width: 100%;
+        width: 40px; /* Explicitly set width */
+        height: 40px; /* Explicitly set height */
+        object-fit: contain; /* Ensures image scales proportionally */
+    }
 }
+
+.page-loader {
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        align-items: center;
+        justify-content: center;
+        animation: content-in 0.75s ease-in-out forwards;
+        will-change: transform, filter;
+    }
+
+    .message {
+        --spread: 50px;
+        --base-gradient-color: #fff;
+        --base-color: #999;
+        --bg: linear-gradient(
+            90deg,
+            #0000 calc(50% - var(--spread)),
+            var(--base-gradient-color),
+            #0000 calc(50% + var(--spread))
+        );
 
-.theme-dark .page-loader .logo-dark {
-    visibility: visible;
+        display: block;
+        font-size: 1rem;
+        font-family: var(--message-font-family);
+        position: relative;
+        background: var(--bg), linear-gradient(var(--base-color), var(--base-color));
+        background-clip: text;
+        background-size:
+            250% 150%,
+            auto;
+        animation: loader 1.5s linear infinite;
+        color: transparent;
+    }
 }
 
-.theme-light .page-loader .logo-light {
-    visibility: visible;
+[data-loading='false'] .page-loader {
+    .content {
+        animation: content-out 0.75s ease-in-out forwards;
+    }
 }
 
-.page-loader .animation {
-    position: absolute;
-    top: 45%;
-    left: 50%;
-    transform: translate(-50%, -50%) translateZ(1px);
-    width: 140px;
-    height: 140px;
+@keyframes content-in {
+    from {
+        transform: translateY(4px);
+        filter: blur(2px);
+    }
+    to {
+        transform: translateY(0);
+        filter: blur(0);
+    }
 }
-.page-loader .animation > div {
-    box-sizing: border-box;
-    display: block;
-    position: absolute;
-    width: 124px;
-    height: 124px;
-    margin: 10px;
-    border: 10px solid rgb(219, 26, 90);
-    border-radius: 50%;
-    animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: rgb(219, 26, 90) transparent transparent transparent;
+
+@keyframes content-out {
+    from {
+        transform: translateY(0);
+        filter: blur(0);
+    }
+    to {
+        transform: translateY(4px);
+        filter: blur(2px);
+    }
 }
-.page-loader .animation > div:nth-child(1) {
-    animation-delay: -0.45s;
-}
-.page-loader .animation > div:nth-child(2) {
-    animation-delay: -0.3s;
-}
-.page-loader .animation > div:nth-child(3) {
-    animation-delay: -0.15s;
-}
-@keyframes animation {
-    0% {
-        transform: rotate(0deg);
+
+@keyframes loader {
+    from {
+        background-position: 100% center;
     }
-    100% {
-        transform: rotate(360deg);
+    to {
+        background-position: 0% center;
     }
 }