Unfloyded/Legamunt
0
0
Fork 0
Code Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

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