From c69c7578f306646f6936e1dac6da36d617d5c34d Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 8 May 2023 14:56:46 -0400
Subject: [PATCH] UX: loading slider for select-kit filter (#21401)

---
 .../addon/components/multi-select.hbs         | 42 ++++++++----------
 .../addon/components/single-select.hbs        | 43 ++++++++-----------
 .../common/select-kit/select-kit.scss         | 25 +++++++++--
 3 files changed, 56 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/select-kit/addon/components/multi-select.hbs b/app/assets/javascripts/select-kit/addon/components/multi-select.hbs
index 2e4a1d60189..bff74779a03 100644
--- a/app/assets/javascripts/select-kit/addon/components/multi-select.hbs
+++ b/app/assets/javascripts/select-kit/addon/components/multi-select.hbs
@@ -30,32 +30,24 @@
       </div>
     {{/if}}
 
-    {{#if this.selectKit.isLoading}}
-      <span class="is-loading">
-        {{#if this.site}}
-          {{loading-spinner size="small"}}
-        {{/if}}
-      </span>
-    {{else}}
-      {{#each this.collections as |collection|}}
-        {{component
-          (component-for-collection collection.identifier this.selectKit)
-          collection=collection
-          selectKit=this.selectKit
-          value=this.value
-        }}
-      {{/each}}
+    {{#each this.collections as |collection|}}
+      {{component
+        (component-for-collection collection.identifier this.selectKit)
+        collection=collection
+        selectKit=this.selectKit
+        value=this.value
+      }}
+    {{/each}}
 
-      {{#if this.selectKit.filter}}
-        {{#if this.selectKit.hasNoContent}}
-          <span class="no-content" role="alert">
-            {{i18n "select_kit.no_content"}}
-          </span>
-        {{else}}
-          <span class="results-count" role="alert">
-            {{i18n "select_kit.results_count" count=this.mainCollection.length}}
-          </span>
-        {{/if}}
+    {{#if this.selectKit.filter}}
+      {{#if this.selectKit.hasNoContent}}
+        <span class="no-content" role="alert">
+          {{i18n "select_kit.no_content"}}
+        </span>
+      {{else}}
+        <span class="results-count" role="alert">
+          {{i18n "select_kit.results_count" count=this.mainCollection.length}}
+        </span>
       {{/if}}
     {{/if}}
   </SelectKit::SelectKitBody>
diff --git a/app/assets/javascripts/select-kit/addon/components/single-select.hbs b/app/assets/javascripts/select-kit/addon/components/single-select.hbs
index 2271eea924d..c4d684d817d 100644
--- a/app/assets/javascripts/select-kit/addon/components/single-select.hbs
+++ b/app/assets/javascripts/select-kit/addon/components/single-select.hbs
@@ -18,33 +18,26 @@
       id=(concat this.selectKit.uniqueID "-filter")
     }}
 
-    {{#if this.selectKit.isLoading}}
-      <span class="is-loading">
-        {{#if this.site}}
-          {{loading-spinner size="small"}}
-        {{/if}}
-      </span>
-    {{else}}
-      {{#each this.collections as |collection|}}
-        {{component
-          (component-for-collection collection.identifier this.selectKit)
-          collection=collection
-          selectKit=this.selectKit
-          value=this.value
-        }}
-      {{/each}}
+    {{#each this.collections as |collection|}}
+      {{component
+        (component-for-collection collection.identifier this.selectKit)
+        collection=collection
+        selectKit=this.selectKit
+        value=this.value
+      }}
+    {{/each}}
 
-      {{#if this.selectKit.filter}}
-        {{#if this.selectKit.hasNoContent}}
-          <span class="no-content" role="alert">
-            {{i18n "select_kit.no_content"}}
-          </span>
-        {{else}}
-          <span class="results-count" role="alert">
-            {{i18n "select_kit.results_count" count=this.mainCollection.length}}
-          </span>
-        {{/if}}
+    {{#if this.selectKit.filter}}
+      {{#if this.selectKit.hasNoContent}}
+        <span class="no-content" role="alert">
+          {{i18n "select_kit.no_content"}}
+        </span>
+      {{else}}
+        <span class="results-count" role="alert">
+          {{i18n "select_kit.results_count" count=this.mainCollection.length}}
+        </span>
       {{/if}}
     {{/if}}
+
   </SelectKit::SelectKitBody>
 {{/unless}}
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index f5dfbb3b8a5..a443c502bf9 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -278,6 +278,7 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    position: relative;
 
     .filter-input {
       background: none;
@@ -321,7 +322,6 @@
   }
 
   .no-content,
-  .is-loading,
   .results-count {
     display: flex;
     flex: 1 0 auto;
@@ -345,8 +345,25 @@
     white-space: nowrap;
   }
 
-  .is-loading {
-    align-items: flex-start;
-    justify-content: center;
+  @keyframes lineDrawToRight {
+    0% {
+      width: 0;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  &.is-loading {
+    .select-kit-filter::after {
+      content: "";
+      position: absolute;
+      background: var(--tertiary);
+      width: 100%;
+      height: 2px;
+      left: 0;
+      bottom: 0;
+      animation: lineDrawToRight 0.5s ease-in;
+    }
   }
 }