From 38bb11d14fae285f6e371357df7363efbd4b79e9 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Tue, 19 Nov 2024 10:01:29 +0100
Subject: [PATCH] Loading animation update

---
 .../onboarding/create-project/+page.svelte    |   6 +-
 .../onboarding/create-project/loading.svelte  | 278 ++++++++++++++----
 2 files changed, 228 insertions(+), 56 deletions(-)

diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index a1347bb36..e536f6ee3 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -16,7 +16,7 @@
     import { base } from '$app/paths';
 
     let showCustomId = false;
-    let isLoading = false;
+    let isLoading = true;
     let id: string;
     let startAnimation = false;
     let projectName = '';
@@ -72,6 +72,10 @@
 
 <div class="page-container u-flex-vertical u-cross-child-center u-main-center u-cross-center">
     {#if isLoading}
+        <button
+            on:click={() => {
+                startAnimation = !startAnimation;
+            }}>toggle</button>
         <Loading {startAnimation} />
     {:else}
         <img
diff --git a/src/routes/(console)/onboarding/create-project/loading.svelte b/src/routes/(console)/onboarding/create-project/loading.svelte
index c9e6f7e43..e3372dcd8 100644
--- a/src/routes/(console)/onboarding/create-project/loading.svelte
+++ b/src/routes/(console)/onboarding/create-project/loading.svelte
@@ -21,55 +21,69 @@
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 4; " />
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 5; " />
         <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 6; " />
-        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 7; " />
-        <div class="border-right" style="grid-row: 1 / 6; grid-column-start: 8; " />
+        <div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 7; " />
+        <div class="border-right is-only-desktop" style="grid-row: 1 / 6; grid-column-start: 8; " />
 
-        <div class="border-bottom" style="grid-row-start: 1; grid-column: 1/10" />
-        <div class="border-bottom" style="grid-row-start: 2; grid-column: 1/10" />
-        <div class="border-bottom" style="grid-row-start: 3; grid-column: 1/10" />
-        <div class="border-bottom" style="grid-row-start: 4; grid-column: 1/10" />
+        <div class="border-bottom" style="grid-row-start: 1;" />
+        <div class="border-bottom" style="grid-row-start: 2;" />
+        <div class="border-bottom" style="grid-row-start: 3;" />
+        <div class="border-bottom" style="grid-row-start: 4;" />
 
-        <div class="vertical-fade-top" style="grid-row-start: 1; grid-column: 1/10" />
-        <div class="vertical-fade-bottom" style="grid-row-start: 5; grid-column: 1/10" />
+        <div class="vertical-fade-top" style="grid-row-start: 1; " />
+        <div class="vertical-fade-bottom" style="grid-row-start: 5; " />
         <div class="horizontal-fade-left" style="grid-row: 1 / 6; grid-column-start: 1;" />
-        <div class="horizontal-fade-right" style="grid-row: 1 / 6; grid-column-start: 9;" />
+        <div class="horizontal-fade-right" style="grid-row: 1 / 6; " />
 
-        <div class="icon icon1" style="grid-row-start: 2; grid-column-start: 2">
+        <div class="icon icon1">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon1.svg`} alt="" />
                 </div>
             </div>
         </div>
-        <div class="icon icon2" style="grid-row-start: 2; grid-column-start: 4">
+        <div class="icon icon2">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon2.svg`} alt="" />
                 </div>
             </div>
         </div>
-        <div class="icon icon3" style="grid-row-start: 2; grid-column-start: 6">
+        <div class="icon icon3">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon3.svg`} alt="" />
                 </div>
             </div>
         </div>
-        <div class="icon icon4" style="grid-row-start: 2; grid-column-start: 8">
+        <div class="icon icon4">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon4.svg`} alt="" />
                 </div>
             </div>
         </div>
-        <div class="icon icon5" style="grid-row-start: 4; grid-column-start: 4">
+        <div class="icon icon5">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon5.svg`} alt="" />
                 </div>
             </div>
         </div>
-        <div class="icon icon6" style="grid-row-start: 4; grid-column-start: 6">
+        <div class="icon icon6">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon7">
+            <div class="icon-container">
+                <div class="icon-content">
+                    <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
+                </div>
+            </div>
+        </div>
+        <div class="icon icon8">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/icon6.svg`} alt="" />
@@ -77,7 +91,7 @@
             </div>
         </div>
 
-        <div class="appwrite" style="grid-row-start: 3; grid-column-start: 5">
+        <div class="appwrite">
             <div class="icon-container">
                 <div class="icon-content">
                     <img src={`${base}/images/onboarding/appwrite.svg`} alt="" />
@@ -89,39 +103,54 @@
 
 <style lang="scss">
     .grid-container {
+        max-width: 100vw;
+        overflow-x: hidden;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         color: var(--color-fgcolor-neutral-primary, #2d2d31);
 
-        --cell-dimension: 40px;
-        --triple-cell-dimension: 120px;
-        --negative-cell-dimension: -40px;
-        --negative-triple-cell-dimension: -120px;
-        --icon-width: 16px;
-        --border-radius-container: 11px;
-        --border-radius-content: 7px;
+        --animation-type: ease-in-out;
+        --icon-colorize-animation-duration: 0.3s; // duration of icons going from gray to colorized
+        --icon-move-to-center-animation-duration: 0.8s; // duration of icons merging together
+        --icons-fade-out-animation-duration: 0.25s; //duration of icons disappearing animation
+        --welcome-to-appwrite-animation-duration: 0.8s; //duration of fading in the welcome to appwrite text
 
-        @media (min-width: 600px) {
-            --cell-dimension: 60px;
-            --triple-cell-dimension: 180px;
-            --negative-cell-dimension: -60px;
-            --negative-triple-cell-dimension: -180px;
-            --icon-width: 24px;
-            --border-radius-container: 16px;
-            --border-radius-content: 11px;
-        }
+        --icon-move-to-center-delay: calc(
+            var(--icon-colorize-animation-duration) + 0.5s
+        ); //delay before the icons merging together is started
+        --icons-fade-out-delay: calc(
+            var(--icon-move-to-center-delay) + 0.4s
+        ); // delay before icons start disappearing
+        --final-icon-fade-out-delay: calc(
+            var(--icons-fade-out-delay) + 0.4s
+        ); //delay before the last icon start disappearing before the appwrite logo shows up
+        --appwrite-icon-fade-in-delay: calc(
+            var(--final-icon-fade-out-delay) + 0.05s
+        ); //delay before the appwrite logo appears
+        --welcome-to-appwrite-delay: calc(var(--icon-move-to-center-delay) + 0.3s);
 
-        @media (min-width: 1023px) {
+        --cell-dimension: 75px;
+        --icon-width: 26px;
+        --border-radius-container: 17px;
+        --border-radius-content: 12px;
+
+        @media (min-width: 768px) {
             --cell-dimension: 120px;
-            --triple-cell-dimension: 360px;
-            --negative-cell-dimension: -120px;
-            --negative-triple-cell-dimension: -360px;
             --icon-width: 48px;
             --border-radius-container: 32px;
             --border-radius-content: 22px;
         }
+
+        --half-cell-dimension: calc(var(--cell-dimension) * 0.5);
+        --double-cell-dimension: calc(var(--cell-dimension) * 2);
+        --triple-cell-dimension: calc(var(--cell-dimension) * 3);
+        --quadriple-cell-dimension: calc(var(--cell-dimension) * 4);
+        --negative-cell-dimension: calc(var(--cell-dimension) * -1);
+        --negative-double-cell-dimension: calc(var(--cell-dimension) * -2);
+        --negative-triple-cell-dimension: calc(var(--cell-dimension) * -3);
+        --negative-quadriple-cell-dimension: calc(var(--cell-dimension) * -4);
     }
     .static-loader {
         z-index: 1;
@@ -130,7 +159,7 @@
         align-items: center;
         gap: 15px;
         margin-bottom: 50px;
-        transition: opacity 0.5s ease-in;
+        transition: opacity 0.5s var(--animation-type);
     }
     .start-animation .static-loader {
         opacity: 0;
@@ -142,19 +171,32 @@
     }
     .start-animation .title-container {
         opacity: 1;
-        transition: opacity 0.5s ease-in 1.5s;
+        transition: opacity var(--welcome-to-appwrite-animation-duration) var(--animation-type)
+            var(--welcome-to-appwrite-delay);
     }
     .grid {
         display: grid;
-        grid-template-columns: repeat(9, var(--cell-dimension));
+        grid-template-columns: 7px repeat(5, var(--cell-dimension)) 7px;
         grid-template-rows: 180px repeat(4, var(--cell-dimension));
+
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(9, var(--cell-dimension));
+            grid-template-rows: 180px repeat(4, var(--cell-dimension));
+        }
     }
 
     .icon {
-        transition: transform 0.5s ease-in 1s;
+        transition: transform var(--icon-move-to-center-animation-duration) var(--animation-type)
+            var(--icon-move-to-center-delay);
     }
     .appwrite {
         opacity: 0;
+        grid-row-start: 3;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 3;
+            grid-column-start: 5;
+        }
     }
 
     .border-right {
@@ -162,19 +204,35 @@
     }
     .border-bottom {
         border-bottom: 1px solid #e4e4e7;
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
     }
 
     .vertical-fade-top {
         background: linear-gradient(to bottom, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
     }
     .vertical-fade-bottom {
         background: linear-gradient(to top, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column: 1/8;
+        @media (min-width: 768px) {
+            grid-column: 1/10;
+        }
     }
     .horizontal-fade-left {
         background: linear-gradient(to right, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
     }
     .horizontal-fade-right {
         background: linear-gradient(to left, hsl(var(--p-body-bg-color)) 0%, transparent 100%);
+        grid-column-start: 7;
+        @media (min-width: 768px) {
+            grid-column-start: 9;
+        }
     }
 
     .icon-container {
@@ -190,7 +248,9 @@
         background: rgba(255, 255, 255, 0.5);
         box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0.04);
         opacity: 0.2;
-        transition: opacity 0.5s ease-in;
+        transition:
+            opacity var(--icon-colorize-animation-duration) var(--animation-type),
+            box-shadow var(--icon-colorize-animation-duration) var(--animation-type);
     }
 
     .icon-content {
@@ -204,7 +264,7 @@
         justify-content: center;
         align-items: center;
         filter: grayscale(1);
-        transition: filter 0.5s ease-in;
+        transition: filter var(--icon-colorize-animation-duration) var(--animation-type);
 
         img {
             width: var(--icon-width);
@@ -216,40 +276,148 @@
     }
 
     .start-animation .icon1 {
-        transform: translateY(var(--cell-dimension)) translateX(var(--triple-cell-dimension));
+        transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
+        @media (min-width: 768px) {
+            transform: translateY(var(--cell-dimension)) translateX(var(--quadriple-cell-dimension));
+        }
     }
     .start-animation .icon2 {
-        transform: translateY(var(--cell-dimension)) translateX(var(--cell-dimension));
+        transform: translateY(var(--cell-dimension)) translateX(0);
+        @media (min-width: 768px) {
+            transform: translateY(var(--cell-dimension)) translateX(var(--double-cell-dimension));
+        }
     }
     .start-animation .icon3 {
-        transform: translateY(var(--cell-dimension)) translateX(var(--negative-cell-dimension));
+        transform: translateY(var(--cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+        @media (min-width: 768px) {
+            transform: translateY(var(--cell-dimension)) translateX(0);
+        }
     }
     .start-animation .icon4 {
-        transform: translateY(var(--cell-dimension))
-            translateX(var(--negative-triple-cell-dimension));
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--double-cell-dimension));
+        @media (min-width: 768px) {
+            transform: translateY(var(--cell-dimension))
+                translateX(var(--negative-double-cell-dimension));
+        }
     }
     .start-animation .icon5 {
-        transform: translateY(var(--negative-cell-dimension)) translateX(var(--cell-dimension));
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
+        @media (min-width: 768px) {
+            transform: translateY(var(--cell-dimension))
+                translateX(var(--negative-quadriple-cell-dimension));
+        }
     }
     .start-animation .icon6 {
         transform: translateY(var(--negative-cell-dimension))
-            translateX(var(--negative-cell-dimension));
+            translateX(var(--double-cell-dimension));
     }
 
-    .start-animation .icon:not(.icon6) .icon-content {
-        opacity: 0;
-        transition: opacity 0.1s ease-in 1.5s;
+    .start-animation .icon7 {
+        transform: translateY(var(--negative-cell-dimension)) translateX(0);
     }
-    .start-animation .icon6 .icon-content {
+    .start-animation .icon8 {
+        transform: translateY(var(--negative-cell-dimension))
+            translateX(var(--negative-double-cell-dimension));
+        @media (min-width: 768px) {
+            transform: translateY(var(--negative-cell-dimension))
+                translateX(var(--negative-double-cell-dimension));
+        }
+    }
+
+    .start-animation .icon:not(.icon8) .icon-container {
+        box-shadow: 0 13px 13px 0 rgba(0, 0, 0, 0);
+    }
+    .start-animation .icon:not(.icon8) .icon-content {
         opacity: 0;
-        transition: opacity 0.5s ease-in 2s;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--icons-fade-out-delay);
+    }
+    .start-animation .icon8 .icon-content {
+        opacity: 0;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--final-icon-fade-out-delay);
     }
     .start-animation .appwrite {
         opacity: 1;
-        transition: opacity 0.5s ease-in 2s;
+        transition: opacity var(--icons-fade-out-animation-duration) var(--animation-type)
+            var(--appwrite-icon-fade-in-delay);
     }
 
     .start-animation .icon-content {
         filter: grayscale(0);
     }
+
+    .icon1 {
+        grid-row-start: 2;
+        grid-column-start: 2;
+
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 1;
+        }
+    }
+
+    .icon2 {
+        grid-row-start: 2;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 3;
+        }
+    }
+
+    .icon3 {
+        grid-row-start: 2;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon4 {
+        grid-row-start: 4;
+        grid-column-start: 2;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 7;
+        }
+    }
+    .icon5 {
+        grid-row-start: 4;
+        grid-column-start: 4;
+        @media (min-width: 768px) {
+            grid-row-start: 2;
+            grid-column-start: 9;
+        }
+    }
+
+    .icon6 {
+        display: none;
+        @media (min-width: 768px) {
+            display: block;
+            grid-row-start: 4;
+            grid-column-start: 3;
+        }
+    }
+
+    .icon7 {
+        display: none;
+        @media (min-width: 768px) {
+            display: block;
+            grid-row-start: 4;
+            grid-column-start: 5;
+        }
+    }
+
+    .icon8 {
+        grid-row-start: 4;
+        grid-column-start: 6;
+        @media (min-width: 768px) {
+            grid-row-start: 4;
+            grid-column-start: 7;
+        }
+    }
 </style>