working indicator (simpler)

src/App.tsx

@@ -113,7 +113,13 @@ export function App() {
         </box>
       )}
     >
-      <LoadingIndicator isLoading={feedStore.isLoadingFeeds()} />
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        backgroundColor={theme.surface}
+      >
+        <LoadingIndicator />
         {DEBUG && (
           <box flexDirection="row" width="100%" height={1}>
             <text fg={theme.primary}>█</text>
@@ -142,19 +148,14 @@ export function App() {
             <text fg={theme.syntaxFunction}>█</text>
           </box>
         )}
-      <box flexDirection="row" width="100%" height={1} />
+        <box flexDirection="row" width="100%" height="100%">
-      <box
-        flexDirection="row"
-        width="100%"
-        height="100%"
-        backgroundColor={theme.surface}
-      >
           <TabNavigation
             activeTab={nav.activeTab}
             onTabSelect={nav.setActiveTab}
           />
           {LayerGraph[nav.activeTab]()}
         </box>
+      </box>
     </ErrorBoundary>
   );
 }

src/components/LoadingIndicator.tsx

@@ -1,36 +1,24 @@
-/**
+import { createSignal, createMemo, onCleanup } from "solid-js";
- * Loading indicator component
- * Displays an animated sliding bar at the top of the screen
- */
-
-import { For } from "solid-js";
 import { useTheme } from "@/context/ThemeContext";
 
-interface LoadingIndicatorProps {
+const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-  isLoading: boolean;
-}
 
-export function LoadingIndicator(props: LoadingIndicatorProps) {
+//TODO: Watch for actual loading state (fetching feeds)
+export function LoadingIndicator() {
   const { theme } = useTheme();
+  const [index, setIndex] = createSignal(0);
 
-  if (!props.isLoading) return null;
+  const interval = setInterval(() => {
+    setIndex((i) => (i + 1) % spinnerChars.length);
+  }, 65);
+
+  onCleanup(() => clearInterval(interval));
+
+  const currentChar = createMemo(() => spinnerChars[index()]);
 
   return (
-    <box
+    <box flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
-      flexDirection="row"
+      <text fg={theme.primary} content={currentChar()} />
-      width="100%"
-      height={1}
-      backgroundColor={theme.background}
-    >
-      <For each={Array.from({ length: 10 })}>
-        {(_, index) => (
-          <box
-            width={2}
-            backgroundColor={theme.primary}
-            style={{ opacity: 0.1 + index() * 0.1 }}
-          />
-        )}
-      </For>
     </box>
   );
 }

src/pages/Feed/FeedPage.tsx

@@ -1,18 +1,17 @@
 /**
  * FeedPage - Shows latest episodes across all subscribed shows
- * Reverse chronological order, like an inbox/timeline
+ * Reverse chronological order, grouped by date
  */
 
 import { createSignal, For, Show } from "solid-js";
 import { useFeedStore } from "@/stores/feed";
-import { useKeyboard } from "@opentui/solid";
 import { format } from "date-fns";
 import type { Episode } from "@/types/episode";
 import type { Feed } from "@/types/feed";
 import { useTheme } from "@/context/ThemeContext";
 import { SelectableBox, SelectableText } from "@/components/Selectable";
-import { se } from "date-fns/locale";
 import { useNavigation } from "@/context/NavigationContext";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
 
 enum FeedPaneType {
   FEED = 1,
@@ -31,22 +30,25 @@ export function FeedPage() {
 
   const allEpisodes = () => feedStore.getAllEpisodesChronological();
 
-  const formatDate = (date: Date): string => {
-    return format(date, "MMM d, yyyy");
-  };
-
   const paginatedEpisodes = () => {
     const episodes = allEpisodes();
     return episodes.slice(0, loadedEpisodesCount());
   };
 
-  const episodesByDate = () => {
+  const formatDate = (date: Date): string => {
-    const groups: Record<string, { episode: Episode; feed: Feed }> = {};
+    return format(date, "MMM d, yyyy");
-    const sortedEpisodes = paginatedEpisodes();
+  };
 
-    for (const episode of sortedEpisodes) {
+  const groupEpisodesByDate = () => {
-      const dateKey = formatDate(new Date(episode.episode.pubDate));
+    const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
-      groups[dateKey] = episode;
+    const episodes = paginatedEpisodes();
+
+    for (const item of episodes) {
+      const dateKey = formatDate(new Date(item.episode.pubDate));
+      if (!groups[dateKey]) {
+        groups[dateKey] = [];
+      }
+      groups[dateKey].push(item);
     }
 
     return groups;
@@ -59,12 +61,6 @@ export function FeedPage() {
     return `${mins}m`;
   };
 
-  const handleRefresh = async () => {
-    setIsRefreshing(true);
-    await feedStore.refreshAllFeeds();
-    setIsRefreshing(false);
-  };
-
   const { theme } = useTheme();
   return (
     <box
@@ -89,29 +85,16 @@ export function FeedPage() {
         }
       >
         <scrollbox height="100%" focused={nav.activeDepth == FeedPaneType.FEED}>
-          <For
+          <For each={Object.entries(groupEpisodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
-            each={Object.entries(episodesByDate()).sort(([a], [b]) =>
+            {([date, episodes]) => (
-              b.localeCompare(a),
+              <box flexDirection="column" gap={1} padding={1}>
-            )}
-          >
-            {([date, episode], groupIndex) => {
-              const selected = () => groupIndex() === 1; // TODO: Manage selections locally
-              return (
-                <>
-                  <box
-                    flexDirection="column"
-                    gap={0}
-                    paddingLeft={1}
-                    paddingRight={1}
-                    paddingTop={1}
-                    paddingBottom={1}
-                  >
                 <SelectableText selected={() => false} primary>
                   {date}
                 </SelectableText>
-                  </box>
+                <For each={episodes}>
+                  {(item) => (
                     <SelectableBox
-                    selected={selected}
+                      selected={() => false}
                       flexDirection="column"
                       gap={0}
                       paddingLeft={1}
@@ -122,32 +105,27 @@ export function FeedPage() {
                         // Selection is handled by App's keyboard navigation
                       }}
                     >
-                    <SelectableText selected={selected} primary>
+                      <SelectableText selected={() => false} primary>
-                      {selected() ? ">" : " "}
+                        {item.episode.title}
-                    </SelectableText>
-                    <SelectableText selected={selected} primary>
-                      {episode.episode.title}
                       </SelectableText>
                       <box flexDirection="row" gap={2} paddingLeft={2}>
-                      <SelectableText selected={selected} primary>
+                        <SelectableText selected={() => false} primary>
-                        {episode.feed.podcast.title}
+                          {item.feed.podcast.title}
                         </SelectableText>
-                      <SelectableText selected={selected} tertiary>
+                        <SelectableText selected={() => false} tertiary>
-                        {formatDate(episode.episode.pubDate)}
+                          {formatDuration(item.episode.duration)}
-                      </SelectableText>
-                      <SelectableText selected={selected} tertiary>
-                        {formatDuration(episode.episode.duration)}
                         </SelectableText>
                       </box>
                     </SelectableBox>
-                </>
+                  )}
-              );
+                </For>
-            }}
+              </box>
+            )}
           </For>
           {/* Loading indicator */}
           <Show when={feedStore.isLoadingMore()}>
             <box padding={1}>
-              <text fg={theme.textMuted}>Loading more episodes...</text>
+              <LoadingIndicator />
             </box>
           </Show>
         </scrollbox>

src/pages/MyShows/MyShowsPage.tsx

@@ -12,6 +12,7 @@ import { format } from "date-fns";
 import { useTheme } from "@/context/ThemeContext";
 import { useAudioNavStore, AudioSource } from "@/stores/audio-nav";
 import { useNavigation } from "@/context/NavigationContext";
+import { LoadingIndicator } from "@/components/LoadingIndicator";
 
 enum MyShowsPaneType {
   SHOWS = 1,
@@ -245,7 +246,7 @@ export function MyShowsPage() {
               </For>
               <Show when={feedStore.isLoadingMore()}>
                 <box paddingLeft={2} paddingTop={1}>
-                  <text fg={theme.warning}>Loading more episodes...</text>
+                  <LoadingIndicator />
                 </box>
               </Show>
               <Show