IMPR: Minor loading improvements

src/scss/_animations.scss

@@ -40,8 +40,19 @@
   }
 
   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;
   }
 }

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,6 +101,7 @@ option,
 a,
 .a,
 .btn {
+
   &:hover,
   &.active {
     opacity: 0.8;

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;