From d2a2513837fd8ac8de445fd47e38791e5d8fea36 Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Wed, 22 Nov 2023 02:19:16 +0200
Subject: [PATCH] IMPR: Minor loading improvements

---
 src/scss/_animations.scss                | 75 ++++++++++++++----------
 src/scss/layout/main/base.scss           | 17 ++++--
 src/scss/layout/main/states/network.scss | 18 +++++-
 3 files changed, 72 insertions(+), 38 deletions(-)

diff --git a/src/scss/_animations.scss b/src/scss/_animations.scss
index 4ebb3cb..1417f33 100755
--- a/src/scss/_animations.scss
+++ b/src/scss/_animations.scss
@@ -1,51 +1,62 @@
 // pulse
 @keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
+  0% {
+    transform: scale(1);
+  }
 
-    50% {
-        transform: scale(.8);
-    }
+  50% {
+    transform: scale(.8);
+  }
 
-    100% {
-        transform: scale(1);
-    }
+  100% {
+    transform: scale(1);
+  }
 }
 
 @keyframes fade {
-    0% {
-        filter: grayscale(0);
+  0% {
+    filter: grayscale(0);
 
-        opacity: 1;
-    }
+    opacity: 1;
+  }
 
-    50% {
-        filter: grayscale(1);
+  50% {
+    filter: grayscale(1);
 
-        opacity: .5;
-    }
+    opacity: .5;
+  }
 
-    100% {
-        filter: grayscale(0);
+  100% {
+    filter: grayscale(0);
 
-        opacity: 1;
-    }
+    opacity: 1;
+  }
 }
 
 @keyframes expand {
-    from {
-        max-height: 0;
-        overflow: hidden;
-    }
+  from {
+    max-height: 0;
+    overflow: hidden;
+  }
 
-    to {
-        max-height: 500rem;
-        max-height: 200vh;
-        overflow: visible;
-    }
+  to {
+    max-height: 100vh;
+    overflow: visible;
+  }
+}
+
+@keyframes shrink {
+  to {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  from {
+    max-height: 100vh;
+    overflow: visible;
+  }
 }
 
 .no-transition {
-  transition: none!important;
-}
+  transition: none !important;
+}
\ No newline at end of file
diff --git a/src/scss/layout/main/base.scss b/src/scss/layout/main/base.scss
index 4ff5a36..e8f4175 100644
--- a/src/scss/layout/main/base.scss
+++ b/src/scss/layout/main/base.scss
@@ -4,6 +4,10 @@ body {
   min-height: 100vh;
 }
 
+html {
+  overflow-y: scroll; // prevent content jumps produced by scroll bar
+}
+
 // sticky footer
 body {
   display: flex;
@@ -16,6 +20,7 @@ body {
   --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
   --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
   --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
+  overflow-y: hidden; // prevent content jumps produced by scroll bar
 
   .wrapper {
     flex: 1 0 auto;
@@ -29,6 +34,7 @@ body {
 }
 
 @media (min-width: $extra-large-screen) {
+
   html,
   body {
     font-size: 0.9vw !important;
@@ -95,12 +101,13 @@ option,
 a,
 .a,
 .btn {
+
   &:hover,
   &.active {
     opacity: 0.8;
 
-    > .fa,
-    > .svg-inline--fa {
+    >.fa,
+    >.svg-inline--fa {
       transform: scale(1.5);
     }
   }
@@ -114,8 +121,8 @@ a,
 [data-toggle][aria-expanded="true"] {
   opacity: 0.8;
 
-  > .fa,
-  > .svg-inline--fa {
+  >.fa,
+  >.svg-inline--fa {
     transform: scale(1.5);
   }
-}
+}
\ No newline at end of file
diff --git a/src/scss/layout/main/states/network.scss b/src/scss/layout/main/states/network.scss
index c018cf2..b15b81c 100644
--- a/src/scss/layout/main/states/network.scss
+++ b/src/scss/layout/main/states/network.scss
@@ -6,6 +6,22 @@
   animation: fade 0.5s linear infinite;
 }
 
+// slower animation speed for big objects
+.carousel__img.loading {
+  animation: fade 3s linear infinite;
+}
+
+main.loading {
+  animation: shrink 0.5s linear 1;
+  max-height: 0;
+  overflow: hidden;
+}
+
+main.loaded {
+  animation: expand 0.5s linear 1;
+  max-height: fit-content;
+}
+
 .graphql-page {
   &.response-404 {
     cursor: not-allowed;
@@ -36,4 +52,4 @@ body.ajax-loading {
     position: relative;
     z-index: 2001;
   }
-}
+}
\ No newline at end of file