diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx index f30efed276..2ae1928e08 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx +++ b/app/javascript/flavours/glitch/features/home_timeline/components/inline_follow_suggestions.tsx @@ -19,6 +19,7 @@ import { DisplayName } from 'flavours/glitch/components/display_name'; import { FollowButton } from 'flavours/glitch/components/follow_button'; import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; +import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import { VerifiedBadge } from 'flavours/glitch/components/verified_badge'; import { domain } from 'flavours/glitch/initial_state'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/store'; @@ -56,9 +57,7 @@ const messages = defineMessages({ }, }); -const Source: React.FC<{ - id: ApiSuggestionSourceJSON; -}> = ({ id }) => { +const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => { const intl = useIntl(); let label, hint; @@ -168,9 +167,9 @@ const Card: React.FC<{ const DISMISSIBLE_ID = 'home/follow-suggestions'; -export const InlineFollowSuggestions: React.FC<{ - hidden?: boolean; -}> = ({ hidden }) => { +export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({ + hidden, +}) => { const intl = useIntl(); const dispatch = useAppDispatch(); const suggestions = useAppSelector((state) => state.suggestions.items); @@ -288,13 +287,17 @@ export const InlineFollowSuggestions: React.FC<{ ref={bodyRef} onScroll={handleScroll} > - {suggestions.map((suggestion) => ( - - ))} + {isLoading ? ( + + ) : ( + suggestions.map((suggestion) => ( + + )) + )} {canScrollLeft && ( diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index f40eb038ec..651ecc8aa7 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -10757,8 +10757,10 @@ noscript { } &__scrollable { + box-sizing: border-box; display: flex; flex-wrap: nowrap; + min-height: 228px; gap: 16px; padding: 16px; scroll-snap-type: x mandatory;