Basic pagination en Artistas

src/styles/main.scss

@@ -70,15 +70,25 @@ h1 {
   font-size: var(--font-1);
 }
 
-h2 {font-size: var(--font-2);}
+h2 {
+  font-size: var(--font-2);
+}
 
-h3 {font-size: var(--font-3);}
+h3 {
+  font-size: var(--font-3);
+}
 
-h4 {font-size: var(--font-4);}
+h4 {
+  font-size: var(--font-4);
+}
 
-h5 {font-size: var(--font-5);}
+h5 {
+  font-size: var(--font-5);
+}
 
-small, .text_small {font-size: var(--font-6);}
+small, .text_small {
+  font-size: var(--font-6);
+}
 
 button.button {
   border: 3px solid var(--accent);
@@ -261,7 +271,6 @@ ul.entity_list {
   }
 }
 
-
 .cover-caption {
   height: 250px;
   width: 250px;
@@ -280,12 +289,12 @@ ul.entity_list {
   }
 
   &:hover {
-    figcaption{
+    figcaption {
       display: block;
       animation: slidein 300ms ease-in-out both;
 
       @keyframes slidein {
-        to{
+        to {
           height: 80px;
           transform: translateY(-80px);
           opacity: 100;
@@ -308,40 +317,50 @@ ul.entity_list {
 
 /* Tabs */
 ul.tabs {
-      display: flex;
-      align-items: stretch;
-      border-bottom: 2px var(--gray-1) solid;
-      margin: 1rem 0;
+  display: flex;
+  align-items: stretch;
+  border-bottom: 2px var(--gray-1) solid;
+  margin: 1rem 0;
 
-      li.tab {
-      padding: .5rem 1em;
-      margin-bottom: -2px;
-      cursor: pointer;
+  li.tab {
+    padding: .5rem 1em;
+    margin-bottom: -2px;
+    cursor: pointer;
 
-      &:hover {
+    &:hover {
       border-bottom: 2px var(--gray-2) solid;
-      }
+    }
 
-      &.selected {
+    &.selected {
       border-bottom: 2px var(--accent) solid;
-      }
-      }
-      }
+    }
+  }
+}
 
 /* Artists */
 .artist-view {
-  .artist{
+  .artist {
     .title {
-      h1 { margin-bottom: 0}
-      h4 { margin-top: 0; margin-bottom: .5em }
+      h1 {
+        margin-bottom: 0
+      }
+
+      h4 {
+        margin-top: 0;
+        margin-bottom: .5em
+      }
+
       max-width: 60%;
     }
+
     .button {
       margin-bottom: 1em;
     }
+
     .tags {
-      display:flex;
+      display: flex;
       flex-wrap: wrap;
+
       li {
         border-bottom: 3px solid var(--accent);
         margin-right: 1em;
@@ -349,33 +368,35 @@ ul.tabs {
         margin-bottom: .5em;
         font-weight: 500;
       }
+
       margin-bottom: 2em;
     }
   }
 
   .discs {
     .discs-list {
+      $grid-width: 250px;
+      $grid-gap: 30px;
+
       display: grid;
-      grid-auto-rows: 250px;
-      gap: 30px;
+      grid-auto-rows: $grid-width;
+      gap: $grid-gap;
       justify-content: start;
       align-content: start;
 
-      $grid-width: 250px;
-      $grid-gap: 16px;
-
-
       @for $x from 1 to 5 {
-        @media (min-width: $grid-width * $x + $grid-gap * $x ) {
+        @media (min-width: $grid-width * $x + $grid-gap * $x) {
           grid-template-columns: repeat($x, auto);
         }
       }
 
-      @media (min-width: $grid-width * 4 + $grid-gap * 4 ) {
+      @media (min-width: $grid-width * 4 + $grid-gap * 4) {
         justify-content: space-between;
-        align-content: space-between;
       }
 
+      &.loading {
+        height: ($grid-width + $grid-gap) * 4;
+      }
 
       .cover-container {
         width: 250px;
@@ -405,7 +426,7 @@ ul.tabs {
 }
 
 *[hidden] {
- visibility: hidden;
+  visibility: hidden;
 }
 
 .space-between {