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

Add disabled state when changing feed filter

See merge request soapbox-pub/soapbox-fe!1636

app/soapbox/actions/timelines.ts

@@ -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) =>

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -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 && (