From 01506528ba85b7031a9943ac10b6875a65b503df Mon Sep 17 00:00:00 2001
From: Harshith Mohan <26010946+harshithmohan@users.noreply.github.com>
Date: Fri, 24 Jan 2025 00:13:58 +0530
Subject: [PATCH] Try to make episode status changes optimistic (#1175)

---
 .../Collection/Episode/EpisodeSummary.tsx     | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/Collection/Episode/EpisodeSummary.tsx b/src/components/Collection/Episode/EpisodeSummary.tsx
index 61606c51..9fefb47a 100644
--- a/src/components/Collection/Episode/EpisodeSummary.tsx
+++ b/src/components/Collection/Episode/EpisodeSummary.tsx
@@ -42,12 +42,19 @@ const StateIcon = ({ className, icon, show }: { icon: string, show: boolean, cla
 );
 
 const StateButton = React.memo((
-  { active, icon, onClick, tooltip }: { icon: string, active: boolean, onClick: () => void, tooltip: string },
+  { active, disabled, icon, onClick, tooltip }: {
+    icon: string;
+    active: boolean;
+    onClick: () => void;
+    tooltip: string;
+    disabled: boolean;
+  },
 ) => (
   <Button
     className={cx('self-center', active ? 'text-panel-text-important' : 'text-panel-text')}
     onClick={onClick}
     tooltip={tooltip}
+    disabled={disabled}
   >
     <Icon path={icon} size={1.2} />
   </Button>
@@ -92,11 +99,15 @@ const EpisodeSummary = React.memo(
       { includeDataFrom: ['AniDB'], include: ['AbsolutePaths', 'MediaInfo'] },
       open,
     );
-    const { mutate: markWatched } = useWatchEpisodeMutation(seriesId, page, nextUp);
-    const { mutate: markHidden } = useHideEpisodeMutation(seriesId, nextUp);
+    const { isPending: markWatchedPending, mutate: markWatched } = useWatchEpisodeMutation(seriesId, page, nextUp);
+    const { isPending: markHiddenPending, mutate: markHidden } = useHideEpisodeMutation(seriesId, nextUp);
 
-    const handleMarkWatched = useEventCallback(() => markWatched({ episodeId, watched: episode.Watched === null }));
-    const handleMarkHidden = useEventCallback(() => markHidden({ episodeId, hidden: !episode.IsHidden }));
+    const handleMarkWatched = useEventCallback(
+      () => markWatched({ episodeId, watched: markWatchedPending ? !episode.Watched : episode.Watched === null }),
+    );
+    const handleMarkHidden = useEventCallback(
+      () => markHidden({ episodeId, hidden: markHiddenPending ? episode.IsHidden : !episode.IsHidden }),
+    );
 
     return (
       <>
@@ -137,6 +148,7 @@ const EpisodeSummary = React.memo(
                       active={!!episode.Watched}
                       onClick={handleMarkWatched}
                       tooltip={`Mark ${episode.Watched ? 'Unwatched' : 'Watched'}`}
+                      disabled={markWatchedPending}
                     />
                   )}
                   <StateButton
@@ -144,6 +156,7 @@ const EpisodeSummary = React.memo(
                     active={episode.IsHidden}
                     onClick={handleMarkHidden}
                     tooltip={`${episode.IsHidden ? 'Unhide' : 'Hide'} Episode`}
+                    disabled={markHiddenPending}
                   />
                 </div>
               </div>