working indicator (simpler)
This commit is contained in:
17
src/App.tsx
17
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%"
|
||||
backgroundColor={theme.surface}
|
||||
>
|
||||
<box flexDirection="row" width="100%" height="100%">
|
||||
<TabNavigation
|
||||
activeTab={nav.activeTab}
|
||||
onTabSelect={nav.setActiveTab}
|
||||
/>
|
||||
{LayerGraph[nav.activeTab]()}
|
||||
</box>
|
||||
</box>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,36 +1,24 @@
|
||||
/**
|
||||
* Loading indicator component
|
||||
* Displays an animated sliding bar at the top of the screen
|
||||
*/
|
||||
|
||||
import { For } from "solid-js";
|
||||
import { createSignal, createMemo, onCleanup } from "solid-js";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
interface LoadingIndicatorProps {
|
||||
isLoading: boolean;
|
||||
}
|
||||
const spinnerChars = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
|
||||
|
||||
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
|
||||
flexDirection="row"
|
||||
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 flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
|
||||
<text fg={theme.primary} content={currentChar()} />
|
||||
</box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 groups: Record<string, { episode: Episode; feed: Feed }> = {};
|
||||
const sortedEpisodes = paginatedEpisodes();
|
||||
const formatDate = (date: Date): string => {
|
||||
return format(date, "MMM d, yyyy");
|
||||
};
|
||||
|
||||
for (const episode of sortedEpisodes) {
|
||||
const dateKey = formatDate(new Date(episode.episode.pubDate));
|
||||
groups[dateKey] = episode;
|
||||
const groupEpisodesByDate = () => {
|
||||
const groups: Record<string, Array<{ episode: Episode; feed: Feed }>> = {};
|
||||
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
|
||||
each={Object.entries(episodesByDate()).sort(([a], [b]) =>
|
||||
b.localeCompare(a),
|
||||
)}
|
||||
>
|
||||
{([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}
|
||||
>
|
||||
<For each={Object.entries(groupEpisodesByDate()).sort(([a], [b]) => b.localeCompare(a))}>
|
||||
{([date, episodes]) => (
|
||||
<box flexDirection="column" gap={1} padding={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>
|
||||
{selected() ? ">" : " "}
|
||||
</SelectableText>
|
||||
<SelectableText selected={selected} primary>
|
||||
{episode.episode.title}
|
||||
<SelectableText selected={() => false} primary>
|
||||
{item.episode.title}
|
||||
</SelectableText>
|
||||
<box flexDirection="row" gap={2} paddingLeft={2}>
|
||||
<SelectableText selected={selected} primary>
|
||||
{episode.feed.podcast.title}
|
||||
<SelectableText selected={() => false} primary>
|
||||
{item.feed.podcast.title}
|
||||
</SelectableText>
|
||||
<SelectableText selected={selected} tertiary>
|
||||
{formatDate(episode.episode.pubDate)}
|
||||
</SelectableText>
|
||||
<SelectableText selected={selected} tertiary>
|
||||
{formatDuration(episode.episode.duration)}
|
||||
<SelectableText selected={() => false} tertiary>
|
||||
{formatDuration(item.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>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user