Add a spinner to the search button

src/client/components/SearchBar.vue

@@ -21,6 +21,10 @@
         :disabled="isFetchingAntibodies"
         @click="fetchAntibodies">
         SEARCH
+        <span
+          v-if="isFetchingAntibodies"
+          class="spinner">
+        </span>
       </button>
     </div>
 

src/client/globals.css

@@ -23,13 +23,33 @@
   font-style: normal;
 }
 
-.icon-check:before { content: "\e900"; }
-.icon-close:before { content: "\e906"; }
-.icon-database:before { content: "\e964"; }
-.icon-mouse:before { content: "\e903"; }
-.icon-rabbit:before { content: "\e902"; }
-.icon-search:before { content: "\e901"; }
-.icon-y:before { content: "\e904"; }
+.icon-check:before {
+  content: "\e900";
+}
+
+.icon-close:before {
+  content: "\e906";
+}
+
+.icon-database:before {
+  content: "\e964";
+}
+
+.icon-mouse:before {
+  content: "\e903";
+}
+
+.icon-rabbit:before {
+  content: "\e902";
+}
+
+.icon-search:before {
+  content: "\e901";
+}
+
+.icon-y:before {
+  content: "\e904";
+}
 
 /* Global styles */
 /* ------------------------------------------------------------------------- */
@@ -133,6 +153,11 @@ i {
 }
 
 .search-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
   background-color: var(--primary);
   border: 1px solid transparent;
   color: var(--black);
@@ -178,15 +203,13 @@ i {
   display: inline-block;
   background-color: var(--primary-translucent);
   border-radius: var(--radius);
-  background-image: linear-gradient(
-    45deg,
-    var(--primary) 25%,
-    transparent 25%,
-    transparent 50%,
-    var(--primary) 50%,
-    var(--primary) 75%,
-    transparent 75%
-  );
+  background-image: linear-gradient(45deg,
+      var(--primary) 25%,
+      transparent 25%,
+      transparent 50%,
+      var(--primary) 50%,
+      var(--primary) 75%,
+      transparent 75%);
   background-size: 1em 1em;
   box-sizing: border-box;
   animation: bar-stripe 0.5s linear infinite;
@@ -196,6 +219,7 @@ i {
   0% {
     background-position: 1em 0;
   }
+
   100% {
     background-position: 0 0;
   }