From 19858dc8897c52065f28284329e289dd2ea5b10b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 14 Apr 2023 15:46:11 +0800
Subject: [PATCH] It's time for a new loading indicator

---
 src/app.css                 |  30 ++++++++++
 src/components/timeline.jsx |   3 +-
 src/pages/notifications.jsx |   3 +-
 src/pages/status.jsx        | 115 ++++++++++++++++++------------------
 4 files changed, 90 insertions(+), 61 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8bb2f33d..e1a2b342 100644
--- a/src/app.css
+++ b/src/app.css
@@ -154,6 +154,36 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   padding-bottom: 80dvh !important;
 }
 
+@keyframes indeterminate-bar {
+  0% {
+    transform: translateX(-50%);
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(50%);
+    opacity: 0.25;
+  }
+}
+.deck > header.loading:after {
+  pointer-events: none;
+  content: '';
+  display: block;
+  height: 4px;
+  position: absolute;
+  bottom: 0;
+  width: 50%;
+  left: 25%;
+  background-image: radial-gradient(
+    ellipse farthest-side at bottom,
+    var(--link-color),
+    transparent
+  );
+  animation: indeterminate-bar 1s ease-in-out infinite alternate;
+}
+
 .timeline {
   margin: 0 auto;
   padding: 0;
diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index ab0c0100..48fc1b86 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -271,6 +271,7 @@ function Timeline({
               loadItems(true);
             }
           }}
+          class={uiState === 'loading' ? 'loading' : ''}
         >
           <div class="header-grid">
             <div class="header-side">
@@ -285,7 +286,7 @@ function Timeline({
             </div>
             {title && (titleComponent ? titleComponent : <h1>{title}</h1>)}
             <div class="header-side">
-              <Loader hidden={uiState !== 'loading'} />
+              {/* <Loader hidden={uiState !== 'loading'} /> */}
               {!!headerEnd && headerEnd}
             </div>
           </div>
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 060b8b4a..9476fdb9 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -162,6 +162,7 @@ function Notifications() {
               scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
             }
           }}
+          class={uiState === 'loading' ? 'loading' : ''}
         >
           <div class="header-grid">
             <div class="header-side">
@@ -172,7 +173,7 @@ function Notifications() {
             </div>
             <h1>Notifications</h1>
             <div class="header-side">
-              <Loader hidden={uiState !== 'loading'} />
+              {/* <Loader hidden={uiState !== 'loading'} /> */}
             </div>
           </div>
           {snapStates.notificationsShowNew && uiState !== 'loading' && (
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index d5d76e27..3939a77b 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -554,7 +554,9 @@ function StatusThread({ closeLink = '/' }) {
       } ${initialPageState.current === 'status' ? 'slide-in' : ''}`}
     >
       <header
-        class={`${heroInView ? 'inview' : ''}`}
+        class={`${heroInView ? 'inview' : ''} ${
+          uiState === 'loading' ? 'loading' : ''
+        }`}
         onDblClick={(e) => {
           // reload statuses
           states.reloadStatusPage++;
@@ -628,66 +630,61 @@ function StatusThread({ closeLink = '/' }) {
             )}
           </h1>
           <div class="header-side">
-            {uiState === 'loading' ? (
-              <Loader abrupt />
-            ) : (
-              <Menu
-                align="end"
-                portal={{
-                  // Need this, else the menu click will cause scroll jump
-                  target: scrollableRef.current,
+            <Menu
+              align="end"
+              portal={{
+                // Need this, else the menu click will cause scroll jump
+                target: scrollableRef.current,
+              }}
+              menuButton={
+                <button type="button" class="button plain4">
+                  <Icon icon="more" alt="Actions" size="xl" />
+                </button>
+              }
+            >
+              <MenuItem
+                disabled={uiState === 'loading'}
+                onClick={() => {
+                  states.reloadStatusPage++;
                 }}
-                menuButton={
-                  <button type="button" class="button plain4">
-                    <Icon icon="more" alt="Actions" size="xl" />
-                  </button>
-                }
               >
-                <MenuItem
-                  disabled={uiState === 'loading'}
-                  onClick={() => {
-                    states.reloadStatusPage++;
-                  }}
-                >
-                  <Icon icon="refresh" />
-                  <span>Refresh</span>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    // Click all buttons with class .spoiler but not .spoiling
-                    const buttons = Array.from(
-                      scrollableRef.current.querySelectorAll(
-                        'button.spoiler:not(.spoiling)',
-                      ),
-                    );
-                    buttons.forEach((button) => {
-                      button.click();
-                    });
-                  }}
-                >
-                  <Icon icon="eye-open" />{' '}
-                  <span>Show all sensitive content</span>
-                </MenuItem>
-                <MenuDivider />
-                <MenuHeader className="plain">Experimental</MenuHeader>
-                <MenuItem
-                  disabled={postSameInstance}
-                  onClick={() => {
-                    const statusURL = getInstanceStatusURL(heroStatus.url);
-                    if (statusURL) {
-                      location.hash = statusURL;
-                    } else {
-                      alert('Unable to switch');
-                    }
-                  }}
-                >
-                  <Icon icon="transfer" />
-                  <small class="menu-double-lines">
-                    Switch to post's instance (<b>{postInstance}</b>)
-                  </small>
-                </MenuItem>
-              </Menu>
-            )}
+                <Icon icon="refresh" />
+                <span>Refresh</span>
+              </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  // Click all buttons with class .spoiler but not .spoiling
+                  const buttons = Array.from(
+                    scrollableRef.current.querySelectorAll(
+                      'button.spoiler:not(.spoiling)',
+                    ),
+                  );
+                  buttons.forEach((button) => {
+                    button.click();
+                  });
+                }}
+              >
+                <Icon icon="eye-open" /> <span>Show all sensitive content</span>
+              </MenuItem>
+              <MenuDivider />
+              <MenuHeader className="plain">Experimental</MenuHeader>
+              <MenuItem
+                disabled={postSameInstance}
+                onClick={() => {
+                  const statusURL = getInstanceStatusURL(heroStatus.url);
+                  if (statusURL) {
+                    location.hash = statusURL;
+                  } else {
+                    alert('Unable to switch');
+                  }
+                }}
+              >
+                <Icon icon="transfer" />
+                <small class="menu-double-lines">
+                  Switch to post's instance (<b>{postInstance}</b>)
+                </small>
+              </MenuItem>
+            </Menu>
             <Link class="button plain deck-close" to={closeLink}>
               <Icon icon="x" size="xl" />
             </Link>