From 106cd16e414731d6eee3ada4749e4e94a8417345 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 19 Oct 2023 10:13:53 +0800
Subject: [PATCH] Add loading state to filter bar

---
 src/app.css                 | 7 +++++++
 src/components/timeline.jsx | 8 +++++++-
 src/pages/search.jsx        | 2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 92cc9957..60b5268c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2116,6 +2116,13 @@ ul.link-list li a .icon {
     transparent
   );
   align-items: center;
+  transition: opacity 0.3s ease-out;
+
+  &.loading,
+  .loading > & {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }
 .filter-bar.centered {
   justify-content: center;
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index 8ec6cd95..0f812a6d 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -334,7 +334,13 @@ function Timeline({
               </button>
             )}
         </header>
-        {!!timelineStart && <div class="timeline-start">{timelineStart}</div>}
+        {!!timelineStart && (
+          <div
+            class={`timeline-start ${uiState === 'loading' ? 'loading' : ''}`}
+          >
+            {timelineStart}
+          </div>
+        )}
         {!!items.length ? (
           <>
             <ul class="timeline">
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 13016111..4d0f11e7 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -152,7 +152,7 @@ function Search(props) {
         </header>
         <main>
           {!!q && (
-            <div class="filter-bar">
+            <div class={`filter-bar ${uiState === 'loading' ? 'loading' : ''}`}>
               {!!type && (
                 <Link to={`/search${q ? `?q=${encodeURIComponent(q)}` : ''}`}>
                   ‹ All