Merge branch 'add-loading-state-to-carousel' into 'develop'

Add disabled state when changing feed filter

See merge request soapbox-pub/soapbox-fe!1636
update-emoji-mart^2
Justin 2022-07-14 20:58:00 +00:00
commit 7482d37f5c
2 zmienionych plików z 23 dodań i 6 usunięć

Wyświetl plik

@ -140,9 +140,15 @@ const parseTags = (tags: Record<string, any[]> = {}, mode: 'any' | 'all' | 'none
const replaceHomeTimeline = (
accountId: string | null,
{ maxId }: Record<string, any> = {},
done?: () => void,
) => (dispatch: AppDispatch, _getState: () => RootState) => {
dispatch({ type: TIMELINE_REPLACE, accountId });
dispatch(expandHomeTimeline({ accountId, maxId }, () => dispatch(insertSuggestionsIntoTimeline())));
dispatch(expandHomeTimeline({ accountId, maxId }, () => {
dispatch(insertSuggestionsIntoTimeline());
if (done) {
done();
}
}));
};
const expandTimeline = (timelineId: string, path: string, params: Record<string, any> = {}, done = noOp) =>

Wyświetl plik

@ -15,13 +15,24 @@ const CarouselItem = ({ avatar }: { avatar: any }) => {
const selectedAccountId = useAppSelector(state => state.timelines.get('home')?.feedAccountId);
const isSelected = avatar.account_id === selectedAccountId;
const handleClick = () =>
isSelected
? dispatch(replaceHomeTimeline(null, { maxId: null }))
: dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null }));
const [isLoading, setLoading] = useState<boolean>(false);
const handleClick = () => {
if (isLoading) {
return;
}
setLoading(true);
if (isSelected) {
dispatch(replaceHomeTimeline(null, { maxId: null }, () => setLoading(false)));
} else {
dispatch(replaceHomeTimeline(avatar.account_id, { maxId: null }, () => setLoading(false)));
}
};
return (
<div onClick={handleClick} className='cursor-pointer' role='filter-feed-by-user'>
<div aria-disabled={isLoading} onClick={handleClick} className='cursor-pointer' role='filter-feed-by-user'>
<Stack className='w-16 h-auto' space={3}>
<div className='block mx-auto relative w-14 h-14 rounded-full'>
{isSelected && (