gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-05 17:31:12 +00:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity

Fix layout shift caused by "Who to follow" widget (#35861)

Browse Source
This commit is contained in:
diondiondion 2025-08-22 11:44:10 +02:00 committed by GitHub
parent 4f494781c1
commit 511e10df34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.tsx
View File

@ -19,6 +19,7 @@ import { DisplayName } from 'mastodon/components/display_name';
import { FollowButton } from 'mastodon/components/follow_button'; import { FollowButton } from 'mastodon/components/follow_button';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button'; import { IconButton } from 'mastodon/components/icon_button';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { VerifiedBadge } from 'mastodon/components/verified_badge'; import { VerifiedBadge } from 'mastodon/components/verified_badge';
import { domain } from 'mastodon/initial_state'; import { domain } from 'mastodon/initial_state';
import { useAppDispatch, useAppSelector } from 'mastodon/store'; import { useAppDispatch, useAppSelector } from 'mastodon/store';
@ -56,9 +57,7 @@ const messages = defineMessages({
}, },
}); });
const Source: React.FC<{ const Source: React.FC<{ id: ApiSuggestionSourceJSON }> = ({ id }) => {
id: ApiSuggestionSourceJSON;
}> = ({ id }) => {
const intl = useIntl(); const intl = useIntl();
let label, hint; let label, hint;
@ -168,9 +167,9 @@ const Card: React.FC<{
const DISMISSIBLE_ID = 'home/follow-suggestions'; const DISMISSIBLE_ID = 'home/follow-suggestions';
export const InlineFollowSuggestions: React.FC<{ export const InlineFollowSuggestions: React.FC<{ hidden?: boolean }> = ({
hidden?: boolean; hidden,
}> = ({ hidden }) => { }) => {
const intl = useIntl(); const intl = useIntl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const suggestions = useAppSelector((state) => state.suggestions.items); const suggestions = useAppSelector((state) => state.suggestions.items);
@ -288,13 +287,17 @@ export const InlineFollowSuggestions: React.FC<{
ref={bodyRef} ref={bodyRef}
onScroll={handleScroll} onScroll={handleScroll}
> >
{suggestions.map((suggestion) => ( {isLoading ? (
<Card <LoadingIndicator />
key={suggestion.account_id} ) : (
id={suggestion.account_id} suggestions.map((suggestion) => (
sources={suggestion.sources} <Card
/> key={suggestion.account_id}
))} id={suggestion.account_id}
sources={suggestion.sources}
/>
))
)}
</div> </div>
{canScrollLeft && ( {canScrollLeft && (

2
app/javascript/styles/mastodon/components.scss
View File

@ -10448,8 +10448,10 @@ noscript {
} }
&__scrollable { &__scrollable {
box-sizing: border-box;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 228px;
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;