Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-01 04:34:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

Disable deferred queries for the search as it does not work

Browse Source
This commit is contained in:
Zoe Roux 2023-04-04 20:33:03 +09:00
parent 9e3337e9c5
commit 7ebe0adace
1 changed files with 12 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
front/packages/ui/src/search/index.tsx
View File

@ -19,6 +19,7 @@
*/ */
import { LibraryItem, LibraryItemP, QueryIdentifier, QueryPage } from "@kyoo/models"; import { LibraryItem, LibraryItemP, QueryIdentifier, QueryPage } from "@kyoo/models";
import { P } from "@kyoo/primitives";
import { Suspense, useRef, useDeferredValue } from "react"; import { Suspense, useRef, useDeferredValue } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ItemGrid } from "../browse/grid"; import { ItemGrid } from "../browse/grid";
@ -27,16 +28,6 @@ import { EmptyView } from "../fetch";
import { InfiniteFetch } from "../fetch-infinite"; import { InfiniteFetch } from "../fetch-infinite";
import { DefaultLayout } from "../layout"; import { DefaultLayout } from "../layout";
const useIsFirstRender = () => {
const isFirst = useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
}
return false;
};
const query = (query: string): QueryIdentifier<LibraryItem> => ({ const query = (query: string): QueryIdentifier<LibraryItem> => ({
parser: LibraryItemP, parser: LibraryItemP,
path: ["search", query, "items"], path: ["search", query, "items"],
@ -45,24 +36,21 @@ const query = (query: string): QueryIdentifier<LibraryItem> => ({
}); });
export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => { export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
const deferredQuery = useDeferredValue(q);
const { t } = useTranslation(); const { t } = useTranslation();
const isFirst = useIsFirstRender();
const empty = <EmptyView message={t("search.empty")} />; const empty = <EmptyView message={t("search.empty")} />;
if (!deferredQuery) return empty; if (!q) return empty;
return ( return (
<Suspense> <InfiniteFetch
<InfiniteFetch query={query(q)}
query={query(deferredQuery)} // TODO: Understand why it does not work.
suspense={!isFirst} // suspense={true} //{!isFirst}
layout={ItemGrid.layout} layout={ItemGrid.layout}
placeholderCount={15} placeholderCount={15}
empty={empty} empty={empty}
> >
{(item) => <ItemGrid {...itemMap(item)} />} {(item) => <ItemGrid {...itemMap(item)} />}
</InfiniteFetch> </InfiniteFetch>
</Suspense>
); );
}; };