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;