monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading indicator to timeline gap indicators in web UI (#33762)

This commit is contained in:
Eugen Rochko 2025-01-29 09:46:04 +01:00 committed by GitHub
parent bd481204b5
commit 82183d8a79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/components/load_gap.tsx
View File

@ -1,9 +1,10 @@
import { useCallback } from 'react'; import { useCallback, useState } from 'react';
import { useIntl, defineMessages } from 'react-intl'; import { useIntl, defineMessages } from 'react-intl';
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
const messages = defineMessages({ const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' }, load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@ -17,10 +18,12 @@ interface Props<T> {
export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => { export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
const intl = useIntl(); const intl = useIntl();
const [loading, setLoading] = useState(false);
const handleClick = useCallback(() => { const handleClick = useCallback(() => {
setLoading(true);
onClick(param); onClick(param);
}, [param, onClick]); }, [setLoading, param, onClick]);
return ( return (
<button <button
@ -28,8 +31,13 @@ export const LoadGap = <T,>({ disabled, param, onClick }: Props<T>) => {
disabled={disabled} disabled={disabled}
onClick={handleClick} onClick={handleClick}
aria-label={intl.formatMessage(messages.load_more)} aria-label={intl.formatMessage(messages.load_more)}
title={intl.formatMessage(messages.load_more)}
> >
{loading ? (
<LoadingIndicator />
) : (
<Icon id='ellipsis-h' icon={MoreHorizIcon} /> <Icon id='ellipsis-h' icon={MoreHorizIcon} />
)}
</button> </button>
); );
}; };

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

@ -4028,23 +4028,27 @@ a.status-card {
} }
.load-more { .load-more {
display: block; display: flex;
align-items: center;
justify-content: center;
color: $dark-text-color; color: $dark-text-color;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
font-size: inherit; font-size: inherit;
text-align: center;
line-height: inherit; line-height: inherit;
margin: 0; width: 100%;
padding: 15px; padding: 15px;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
clear: both;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background: var(--on-surface-color); background: var(--on-surface-color);
} }
.icon {
width: 22px;
height: 22px;
}
} }
.load-gap { .load-gap {
@ -4421,6 +4425,7 @@ a.status-card {
justify-content: center; justify-content: center;
} }
.load-more .loading-indicator,
.button .loading-indicator { .button .loading-indicator {
position: static; position: static;
transform: none; transform: none;
@ -4432,6 +4437,10 @@ a.status-card {
} }
} }
.load-more .loading-indicator .circular-progress {
color: lighten($ui-base-color, 26%);
}
.circular-progress { .circular-progress {
color: lighten($ui-base-color, 26%); color: lighten($ui-base-color, 26%);
animation: 1.4s linear 0s infinite normal none running simple-rotate; animation: 1.4s linear 0s infinite normal none running simple-rotate;