From 6f727ae1394dcddd7279a48c60ed58d947659a73 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 14 Jul 2022 15:46:04 -0400
Subject: [PATCH] Add disabled state when changing feed filter

---
 app/soapbox/actions/timelines.ts              |  8 ++++++-
 .../features/feed-filtering/feed-carousel.tsx | 21 ++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/actions/timelines.ts b/app/soapbox/actions/timelines.ts
index 74622d180..f1e9f5634 100644
--- a/app/soapbox/actions/timelines.ts
+++ b/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) =>
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 59c6776ba..d64c6f8f0 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/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 && (