IMPR: Minor loading improvements

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;
+}

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);
   }
-}
+}

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;
   }
-}
+}