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
-          activeTab={nav.activeTab}
-          onTabSelect={nav.setActiveTab}
-        />
-        {LayerGraph[nav.activeTab]()}
+        <LoadingIndicator />
+        {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="100%">
+          <TabNavigation
+            activeTab={nav.activeTab}
+            onTabSelect={nav.setActiveTab}
+          />
+          {LayerGraph[nav.activeTab]()}
+        </box>
       </box>
     </ErrorBoundary>
   );