IMPR: Minor loading improvements

src/scss/_animations.scss

@@ -40,12 +40,23 @@
   }
 
   to {
-        max-height: 500rem;
+    max-height: 100vh;
-        max-height: 200vh;
+    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,
+    >.fa,
-    > .svg-inline--fa {
+    >.svg-inline--fa {
       transform: scale(1.5);
     }
   }
@@ -114,8 +121,8 @@ a,
 [data-toggle][aria-expanded="true"] {
   opacity: 0.8;
 
-  > .fa,
+  >.fa,
-  > .svg-inline--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;