diff --git a/src/features/decks/deck-column.tsx b/src/features/decks/deck-column.tsx index a1fd5a3..5719af0 100644 --- a/src/features/decks/deck-column.tsx +++ b/src/features/decks/deck-column.tsx @@ -16,6 +16,7 @@ import { PlatformIcon } from "../platforms/platform-icon"; import { type ColumnRegistry, useRegisterColumn } from "./column-tools"; import type { DeckColumn } from "./model"; import { ResearchPostCard } from "./research-post-card"; +import { ResearchPostSkeleton } from "./research-post-skeleton"; import { describeSource } from "./source-description"; export function ResearchColumn({ @@ -129,6 +130,7 @@ export function ResearchColumn({ // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Make the scrolling feed keyboard-accessible. tabIndex={0} aria-label={`Posts in ${column.title}`} + aria-busy={query.isFetching} > {visiblePosts.map((post) => ( ))} + {query.isPending || query.isFetchingNextPage ? ( + <> + + + + + ) : null} {query.isError ? (

{error.message}

diff --git a/src/features/decks/decks.css b/src/features/decks/decks.css index a895e19..8e02389 100644 --- a/src/features/decks/decks.css +++ b/src/features/decks/decks.css @@ -117,6 +117,7 @@ .deck-column-results { min-height: 0; overflow-y: auto; + scrollbar-gutter: stable; flex: 1; overscroll-behavior-y: contain; scrollbar-width: thin; diff --git a/src/features/decks/research-post-skeleton.tsx b/src/features/decks/research-post-skeleton.tsx new file mode 100644 index 0000000..18604e9 --- /dev/null +++ b/src/features/decks/research-post-skeleton.tsx @@ -0,0 +1,21 @@ +import { Skeleton } from "#/components/ui/skeleton"; + +export function ResearchPostSkeleton() { + return ( + + ); +}