diff --git a/package.json b/package.json index f8407026..2836a349 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "^5.0.1", "react-virtuoso": "^1.8.6", - "swr": "^1.3.0", + "swr": "^2.1.5", "use-query-params": "^1.2.3", "web-vitals": "^2.1.0" }, diff --git a/src/components/manga/ChapterList.tsx b/src/components/manga/ChapterList.tsx index 96ae7dea..e5870cf9 100644 --- a/src/components/manga/ChapterList.tsx +++ b/src/components/manga/ChapterList.tsx @@ -87,7 +87,7 @@ const ChapterList: React.FC = ({ mangaId }) => { const { data: chaptersData, mutate, - loading, + isLoading, } = useQuery(`/api/v1/manga/${mangaId}/chapters?onlineFetch=false`); const chapters = useMemo(() => chaptersData ?? [], [chaptersData]); @@ -176,7 +176,7 @@ const ChapterList: React.FC = ({ mangaId }) => { .catch(() => makeToast(t(actionsStrings[action].error, { count: chapterIds.length }) as string, 'error')); }; - if (loading) { + if (isLoading) { return (
('/api/v1/extension/list'); + const { data: allExtensions, mutate, isLoading } = useQuery('/api/v1/extension/list'); const filteredExtensions = useMemo( () => @@ -169,7 +169,7 @@ export default function MangaExtensions() { }; }, []); - if (loading) { + if (isLoading) { return ; } diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx index 9b9775a2..31f3d8b2 100644 --- a/src/screens/Library.tsx +++ b/src/screens/Library.tsx @@ -36,7 +36,7 @@ export default function Library() { const { options } = useLibraryOptionsContext(); const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now()); - const { data: tabsData, error: tabsError, loading } = useQuery('/api/v1/category'); + const { data: tabsData, error: tabsError, isLoading } = useQuery('/api/v1/category'); const tabs = tabsData ?? []; const librarySize = useMemo(() => tabs.map((tab) => tab.size).reduce((prev, curr) => prev + curr, 0), [tabs]); @@ -46,10 +46,8 @@ export default function Library() { const { data: mangaData, error: mangaError, - loading: mangaLoading, - } = useQuery(`/api/v1/category/${activeTab?.id}`, { - isPaused: () => activeTab == null, - }); + isLoading: mangaLoading, + } = useQuery(activeTab ? `/api/v1/category/${activeTab?.id}` : null); const mangas = mangaData ?? []; const { setTitle, setAction } = useContext(NavbarContext); @@ -88,7 +86,7 @@ export default function Library() { ); } - if (loading) { + if (isLoading) { return ; } diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx index 1de3a762..79c89fda 100644 --- a/src/screens/Manga.tsx +++ b/src/screens/Manga.tsx @@ -34,7 +34,7 @@ const Manga: React.FC = () => { const { data: manga, error, - loading, + isLoading, isValidating, mutate, } = useQuery(`/api/v1/manga/${id}/?onlineFetch=false`); @@ -95,7 +95,7 @@ const Manga: React.FC = () => { - {loading && } + {isLoading && } {manga && } diff --git a/src/screens/Sources.tsx b/src/screens/Sources.tsx index 425bfdc6..5ebcb71b 100644 --- a/src/screens/Sources.tsx +++ b/src/screens/Sources.tsx @@ -52,7 +52,7 @@ export default function Sources() { const [shownLangs, setShownLangs] = useLocalStorage('shownSourceLangs', sourceDefualtLangs()); const [showNsfw] = useLocalStorage('showNsfw', true); - const { data: sources, loading } = useQuery('/api/v1/source/list'); + const { data: sources, isLoading } = useQuery('/api/v1/source/list'); const history = useHistory(); @@ -89,7 +89,7 @@ export default function Sources() { ); }, [t, shownLangs, sources]); - if (loading) return ; + if (isLoading) return ; if (sources?.length === 0) { return

{t('source.error.label.no_sources_found')}

; diff --git a/src/screens/settings/LibrarySettings.tsx b/src/screens/settings/LibrarySettings.tsx index 13ba0491..57f44fd7 100644 --- a/src/screens/settings/LibrarySettings.tsx +++ b/src/screens/settings/LibrarySettings.tsx @@ -77,13 +77,13 @@ export default function LibrarySettings() { setAction(null); }, [t]); - const { data: categories, loading, error: requestError, mutate } = useQuery('/api/v1/category/'); + const { data: categories, isLoading, error: requestError, mutate } = useQuery('/api/v1/category/'); const [currentCategories, setCurrentCategories] = useState(categories ?? []); // categories to check if response categories changed const [dialogCategories, setDialogCategories] = useState(categories ?? []); // categories that are shown and updated in the dialog const [isDialogOpen, setIsDialogOpen] = useState(false); - const retrievedCategoriesChanged = !loading && categories?.length && categories !== currentCategories; + const retrievedCategoriesChanged = !isLoading && categories?.length && categories !== currentCategories; if (retrievedCategoriesChanged) { setCurrentCategories(categories); setDialogCategories(categories); diff --git a/src/util/client.tsx b/src/util/client.tsx index bff62681..51a7546f 100644 --- a/src/util/client.tsx +++ b/src/util/client.tsx @@ -46,13 +46,7 @@ export async function fetcher(path: string) { return res.data as T; } -export const useQuery = ( - key: string, - config?: SWRConfiguration, -): SWRResponse & { loading: boolean } => { - const res = useSWR(key, config); - return { - ...res, - loading: res.data == null && res.error == null, - }; -}; +export const useQuery = ( + key: string | null, + config?: SWRConfiguration, +): SWRResponse => useSWR(key, config); diff --git a/src/util/readerSettings.ts b/src/util/readerSettings.ts index c20c72e3..53924c38 100644 --- a/src/util/readerSettings.ts +++ b/src/util/readerSettings.ts @@ -45,10 +45,10 @@ export const useDefaultReaderSettings = (): { settings: IReaderSettings; loading: boolean; } => { - const { data: meta, loading } = useQuery('/api/v1/meta'); + const { data: meta, isLoading } = useQuery('/api/v1/meta'); const settings = getReaderSettingsWithDefaultValueFallback(meta); - return { metadata: meta, settings, loading }; + return { metadata: meta, settings, loading: isLoading }; }; /** diff --git a/src/util/searchSettings.ts b/src/util/searchSettings.ts index d8fd47d4..18f4ee2d 100644 --- a/src/util/searchSettings.ts +++ b/src/util/searchSettings.ts @@ -16,8 +16,8 @@ export const useSearchSettings = (): { settings: ISearchSettings; loading: boolean; } => { - const { data: meta, loading } = useQuery('/api/v1/meta'); + const { data: meta, isLoading } = useQuery('/api/v1/meta'); const settings = getSearchSettingsWithDefaultValueFallback(meta); - return { metadata: meta, settings, loading }; + return { metadata: meta, settings, loading: isLoading }; }; diff --git a/yarn.lock b/yarn.lock index 35482a6d..31d7a322 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10199,10 +10199,12 @@ svgo@^2.7.0: picocolors "^1.0.0" stable "^0.1.8" -swr@^1.3.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8" - integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw== +swr@^2.1.5: + version "2.1.5" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.1.5.tgz#688effa719c03f6d35c66decbb0f8e79c7190399" + integrity sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw== + dependencies: + use-sync-external-store "^1.2.0" symbol-tree@^3.2.4: version "3.2.4" @@ -10591,6 +10593,11 @@ use-query-params@^1.2.3: dependencies: serialize-query-params "^1.3.5" +use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"