djsundog/tootlab-mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-02-02 21:13:02 -05:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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>
);
};

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

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