working indicator (simpler)

src/App.tsx

@@ -113,47 +113,48 @@ export function App() {
         </box>
       )}
     >
-      <LoadingIndicator isLoading={feedStore.isLoadingFeeds()} />
-      {DEBUG && (
-        <box flexDirection="row" width="100%" height={1}>
-          <text fg={theme.primary}>█</text>
-          <text fg={theme.secondary}>█</text>
-          <text fg={theme.accent}>█</text>
-          <text fg={theme.error}>█</text>
-          <text fg={theme.warning}>█</text>
-          <text fg={theme.success}>█</text>
-          <text fg={theme.info}>█</text>
-          <text fg={theme.text}>█</text>
-          <text fg={theme.textMuted}>█</text>
-          <text fg={theme.surface}>█</text>
-          <text fg={theme.background}>█</text>
-          <text fg={theme.border}>█</text>
-          <text fg={theme.borderActive}>█</text>
-          <text fg={theme.diffAdded}>█</text>
-          <text fg={theme.diffRemoved}>█</text>
-          <text fg={theme.diffContext}>█</text>
-          <text fg={theme.markdownText}>█</text>
-          <text fg={theme.markdownHeading}>█</text>
-          <text fg={theme.markdownLink}>█</text>
-          <text fg={theme.markdownCode}>█</text>
-          <text fg={theme.syntaxKeyword}>█</text>
-          <text fg={theme.syntaxString}>█</text>
-          <text fg={theme.syntaxNumber}>█</text>
-          <text fg={theme.syntaxFunction}>█</text>
-        </box>
-      )}
-      <box flexDirection="row" width="100%" height={1} />
       <box
-        flexDirection="row"
+        flexDirection="column"
         width="100%"
         height="100%"
         backgroundColor={theme.surface}
       >
-        <TabNavigation
+        <LoadingIndicator />
-          activeTab={nav.activeTab}
+        {DEBUG && (
-          onTabSelect={nav.setActiveTab}
+          <box flexDirection="row" width="100%" height={1}>
-        />
+            <text fg={theme.primary}>█</text>
-        {LayerGraph[nav.activeTab]()}
+            <text fg={theme.secondary}>█</text>
+            <text fg={theme.accent}>█</text>
+            <text fg={theme.error}>█</text>
+            <text fg={theme.warning}>█</text>
+            <text fg={theme.success}>█</text>
+            <text fg={theme.info}>█</text>
+            <text fg={theme.text}>█</text>
+            <text fg={theme.textMuted}>█</text>
+            <text fg={theme.surface}>█</text>
+            <text fg={theme.background}>█</text>
+            <text fg={theme.border}>█</text>
+            <text fg={theme.borderActive}>█</text>
+            <text fg={theme.diffAdded}>█</text>
+            <text fg={theme.diffRemoved}>█</text>
+            <text fg={theme.diffContext}>█</text>
+            <text fg={theme.markdownText}>█</text>
+            <text fg={theme.markdownHeading}>█</text>
+            <text fg={theme.markdownLink}>█</text>
+            <text fg={theme.markdownCode}>█</text>
+            <text fg={theme.syntaxKeyword}>█</text>
+            <text fg={theme.syntaxString}>█</text>
+            <text fg={theme.syntaxNumber}>█</text>
+            <text fg={theme.syntaxFunction}>█</text>
+          </box>
+        )}
+        <box flexDirection="row" width="100%" height="100%">
+          <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,65 +85,47 @@ 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}>
+                <SelectableText selected={() => false} primary>
+                  {date}
+                </SelectableText>
+                <For each={episodes}>
+                  {(item) => (
+                    <SelectableBox
+                      selected={() => false}
+                      flexDirection="column"
+                      gap={0}
+                      paddingLeft={1}
+                      paddingRight={1}
+                      paddingTop={0}
+                      paddingBottom={0}
+                      onMouseDown={() => {
+                        // Selection is handled by App's keyboard navigation
+                      }}
+                    >
+                      <SelectableText selected={() => false} primary>
+                        {item.episode.title}
+                      </SelectableText>
+                      <box flexDirection="row" gap={2} paddingLeft={2}>
+                        <SelectableText selected={() => false} primary>
+                          {item.feed.podcast.title}
+                        </SelectableText>
+                        <SelectableText selected={() => false} tertiary>
+                          {formatDuration(item.episode.duration)}
+                        </SelectableText>
+                      </box>
+                    </SelectableBox>
+                  )}
+                </For>
+              </box>
             )}
-          >
-            {([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>
-                  <SelectableBox
-                    selected={selected}
-                    flexDirection="column"
-                    gap={0}
-                    paddingLeft={1}
-                    paddingRight={1}
-                    paddingTop={0}
-                    paddingBottom={0}
-                    onMouseDown={() => {
-                      // Selection is handled by App's keyboard navigation
-                    }}
-                  >
-                    <SelectableText selected={selected} primary>
-                      {selected() ? ">" : " "}
-                    </SelectableText>
-                    <SelectableText selected={selected} primary>
-                      {episode.episode.title}
-                    </SelectableText>
-                    <box flexDirection="row" gap={2} paddingLeft={2}>
-                      <SelectableText selected={selected} primary>
-                        {episode.feed.podcast.title}
-                      </SelectableText>
-                      <SelectableText selected={selected} tertiary>
-                        {formatDate(episode.episode.pubDate)}
-                      </SelectableText>
-                      <SelectableText selected={selected} tertiary>
-                        {formatDuration(episode.episode.duration)}
-                      </SelectableText>
-                    </box>
-                  </SelectableBox>
-                </>
-              );
-            }}
           </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