Merge pull request #312 from MITLibraries/use-282

USE-282: Styling libkey links

Author: djanelle-mit

app/assets/stylesheets/partials/_effects.scss

@@ -29,3 +29,40 @@
         outline-offset: 2px;
     }
 }
+
+// SKELETON LOADER
+
+@mixin skeleton-loader($width, $height:2rem) {
+    background-color: $color-gray-200;
+    border-radius: 4px;
+    display: inline-block;
+    height: $height;
+    position: relative;
+    overflow: hidden;
+    font-size: inherit;
+    min-width: $width;
+
+    &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+        90deg,
+        rgba(#fff, 0) 0,
+        rgba(#fff, 0.2) 20%,
+        rgba(#fff, 0.5) 60%,
+        rgba(#fff, 0)
+    );
+    animation: shimmer 1s infinite;
+    content: '';
+    }
+
+    @keyframes shimmer {
+    100% {
+        transform: translateX(100%);
+    }
+    }
+}

app/assets/stylesheets/partials/_results.scss

@@ -225,19 +225,29 @@
       font-family: $base-font; // Since we're using 16px, override to use body font
     }
 
+    .result-get {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
     // Make result buttons present as underlined links
     a.button {
       @include underlinedLinks;
       font-weight: $fw-medium;
       font-size: 1.6rem;
-      margin-right: 16px;
     }
 
     // Except the first button, which should present as a secondary button
-    a.button:first-child {
+    .result-get > a.button:first-child {
       @include buttonSecondary;
     }
 
+    // Loading skeleton when a button isn't available
+    span.skeleton-loader {
+      @include skeleton-loader(112px);
+    }
+
     .truncate-list li:last-child {margin-bottom: 0;}
 
   }

app/views/search/_trigger_libkey.html.erb

@@ -2,13 +2,8 @@
 
 <% data_url = "/lookup?type=#{kind}&identifier=#{identifier}" %>
 
-<span class="tacos-container"
+<span class="libkey-container"
      data-controller="content-loader"
      data-content-loader-url-value=<%= data_url %>>
-     <span style="background-color:lightgray;
-                  display: inline-block;
-                  font-size: 1.6rem;
-                  font-weight: 500;
-                  margin-right: 16px;
-                  min-width: 120px;">&nbsp;</span>
+     <span class="skeleton-loader">&nbsp;</span>
 </span>