It's time for a new loading indicator

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;

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>

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' && (

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,9 +630,6 @@ function StatusThread({ closeLink = '/' }) {
             )}
           </h1>
           <div class="header-side">
-            {uiState === 'loading' ? (
-              <Loader abrupt />
-            ) : (
             <Menu
               align="end"
               portal={{
@@ -665,8 +664,7 @@ function StatusThread({ closeLink = '/' }) {
                   });
                 }}
               >
-                  <Icon icon="eye-open" />{' '}
-                  <span>Show all sensitive content</span>
+                <Icon icon="eye-open" /> <span>Show all sensitive content</span>
               </MenuItem>
               <MenuDivider />
               <MenuHeader className="plain">Experimental</MenuHeader>
@@ -687,7 +685,6 @@ function StatusThread({ closeLink = '/' }) {
                 </small>
               </MenuItem>
             </Menu>
-            )}
             <Link class="button plain deck-close" to={closeLink}>
               <Icon icon="x" size="xl" />
             </Link>