Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Lazy load genre lists on the home page

Browse Source
This commit is contained in:
Zoe Roux 2023-11-08 16:14:58 +01:00
parent 9409197766
commit 3be409ec70
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/apps/web/src/pages/_app.tsx
View File

@ -159,16 +159,17 @@ App.getInitialProps = async (ctx: AppContext) => {
? Component.getLayout.Layout.getFetchUrls
: Component.getLayout?.getFetchUrls;
const items = arrayShuffle(Component.randomItems ?? []);
appProps.pageProps.randomItems = {
[Component.displayName!]: items,
};
const urls: QueryIdentifier[] = [
...(getUrl ? getUrl(ctx.router.query as any) : []),
...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any) : []),
...(getUrl ? getUrl(ctx.router.query as any, items) : []),
...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any, items) : []),
];
const [authToken, token] = await getTokenWJ(ctx.ctx.req?.headers.cookie);
appProps.pageProps.queryState = await fetchQuery(urls, authToken);
appProps.pageProps.token = token;
appProps.pageProps.randomItems = {
[Component.displayName!]: arrayShuffle(Component.randomItems ?? []),
};
return { pageProps: superjson.serialize(appProps.pageProps) };
};

2
front/packages/models/src/query.tsx
View File

@ -165,7 +165,7 @@ export type QueryIdentifier<T = unknown, Ret = T> = {
export type QueryPage<Props = {}, Items = unknown> = ComponentType<
Props & { randomItems: Items[] }
> & {
getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier<any>[];
getFetchUrls?: (route: { [key: string]: string }, randomItems: Items[]) => QueryIdentifier<any>[];
getLayout?:
| QueryPage<{ page: ReactElement }>
| { Layout: QueryPage<{ page: ReactElement }>; props: object };

14
front/packages/ui/src/home/index.tsx
View File

@ -27,8 +27,12 @@ import { GenreGrid } from "./genre";
import { Recommanded } from "./recommanded";
import { VerticalRecommanded } from "./vertical";
import { NewsList } from "./news";
import { useLayoutEffect, useState } from "react";
export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
const [isClient, setClient] = useState(false);
useLayoutEffect(() => setClient(true), []);
return (
<ScrollView>
<Fetch query={Header.query()}>
@ -57,11 +61,7 @@ export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
<GenreGrid key={x} genre={x} />
))}
<VerticalRecommanded />
{randomItems
.filter((_, i) => i >= 6)
.map((x) => (
<GenreGrid key={x} genre={x} />
))}
{isClient && randomItems.filter((_, i) => i >= 6).map((x) => <GenreGrid key={x} genre={x} />)}
</ScrollView>
);
};
@ -70,10 +70,10 @@ HomePage.randomItems = [...Object.values(Genre)];
HomePage.getLayout = { Layout: DefaultLayout, props: { transparent: true } };
HomePage.getFetchUrls = () => [
HomePage.getFetchUrls = (_, randomItems) => [
Header.query(),
NewsList.query(),
...Object.values(Genre).map((x) => GenreGrid.query(x)),
...randomItems.filter((_, i) => i < 6).map((x) => GenreGrid.query(x)),
Recommanded.query(),
VerticalRecommanded.query(),
];