fix: #1007 Season episodes temporarily disappearing when marking one as watched (#1031)

Co-authored-by: Fredrik Burmester <fredrik.burmester@gmail.com>

components/series/CastAndCrew.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { HorizontalScroll } from "../common/HorrizontalScroll";
+import { HorizontalScroll } from "../common/HorizontalScroll";
 import { Text } from "../common/Text";
 import { itemRouter } from "../common/TouchableItemRouter";
 import Poster from "../posters/Poster";

components/series/CurrentSeries.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View, type ViewProps } from "react-native";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { HorizontalScroll } from "../common/HorrizontalScroll";
+import { HorizontalScroll } from "../common/HorizontalScroll";
 import { Text } from "../common/Text";
 import Poster from "../posters/Poster";
 

components/series/JellyseerrSeasons.tsx

@@ -11,7 +11,7 @@ import { orderBy } from "lodash";
 import type React from "react";
 import { useCallback, useMemo, useState } from "react";
 import { Alert, TouchableOpacity, View } from "react-native";
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { HorizontalScroll } from "@/components/common/HorizontalScroll";
 import { Text } from "@/components/common/Text";
 import { Tags } from "@/components/GenreTags";
 import { dateOpts } from "@/components/jellyseerr/DetailFacts";

components/series/SeasonEpisodesCarousel.tsx

@@ -12,7 +12,7 @@ import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import {
   HorizontalScroll,
   type HorizontalScrollRef,
-} from "../common/HorrizontalScroll";
+} from "../common/HorizontalScroll";
 import { ItemCardText } from "../ItemCardText";
 
 interface Props extends ViewProps {
@@ -42,11 +42,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
     return item?.SeasonId;
   }, [item]);
 
-  const {
-    data: episodes,
-    isLoading,
-    isFetching,
-  } = useQuery({
+  const { data: episodes, isPending } = useQuery({
     queryKey: ["episodes", seasonId, isOffline],
     queryFn: async () => {
       if (isOffline) {
@@ -132,7 +128,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
       ref={scrollRef}
       data={episodes}
       extraData={item}
-      loading={loading || isLoading || isFetching}
+      loading={loading || isPending}
       renderItem={(_item, _idx) => (
         <TouchableOpacity
           key={_item.Id}

components/series/SeasonPicker.tsx

@@ -74,7 +74,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
     return season.Id!;
   }, [seasons, seasonIndex]);
 
-  const { data: episodes, isFetching } = useQuery({
+  const { data: episodes, isPending } = useQuery({
     queryKey: ["episodes", item.Id, selectedSeasonId],
     queryFn: async () => {
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) {
@@ -165,7 +165,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
         ) : null}
       </View>
       <View className='px-4 flex flex-col mt-4'>
-        {isFetching ? (
+        {isPending ? (
           <View
             style={{
               minHeight: 144 * nrOfEpisodes,