Try to make episode status changes optimistic (#1175)

ShokoAnime · Jan 23, 2025 · 0150652 · 0150652
1 parent 7bcd582
commit 0150652
Showing 1 changed file with 18 additions and 5 deletions.
diff --git 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,13 +148,15 @@ const EpisodeSummary = React.memo(
                       active={!!episode.Watched}
                       onClick={handleMarkWatched}
                       tooltip={`Mark ${episode.Watched ? 'Unwatched' : 'Watched'}`}
+                      disabled={markWatchedPending}
                     />
                   )}
                   <StateButton
                     icon={mdiEyeOffOutline}
                     active={episode.IsHidden}
                     onClick={handleMarkHidden}
                     tooltip={`${episode.IsHidden ? 'Unhide' : 'Hide'} Episode`}
+                    disabled={markHiddenPending}
                   />
                 </div>
               </div>