Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-30 19:54:16 -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.Layout.getFetchUrls
: Component.getLayout?.getFetchUrls; : Component.getLayout?.getFetchUrls;
const items = arrayShuffle(Component.randomItems ?? []);
appProps.pageProps.randomItems = {
[Component.displayName!]: items,
};
const urls: QueryIdentifier[] = [ const urls: QueryIdentifier[] = [
...(getUrl ? getUrl(ctx.router.query as any) : []), ...(getUrl ? getUrl(ctx.router.query as any, items) : []),
...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any) : []), ...(getLayoutUrl ? getLayoutUrl(ctx.router.query as any, items) : []),
]; ];
const [authToken, token] = await getTokenWJ(ctx.ctx.req?.headers.cookie); const [authToken, token] = await getTokenWJ(ctx.ctx.req?.headers.cookie);
appProps.pageProps.queryState = await fetchQuery(urls, authToken); appProps.pageProps.queryState = await fetchQuery(urls, authToken);
appProps.pageProps.token = token; appProps.pageProps.token = token;
appProps.pageProps.randomItems = {
[Component.displayName!]: arrayShuffle(Component.randomItems ?? []),
};
return { pageProps: superjson.serialize(appProps.pageProps) }; 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< export type QueryPage<Props = {}, Items = unknown> = ComponentType<
Props & { randomItems: Items[] } Props & { randomItems: Items[] }
> & { > & {
getFetchUrls?: (route: { [key: string]: string }) => QueryIdentifier<any>[]; getFetchUrls?: (route: { [key: string]: string }, randomItems: Items[]) => QueryIdentifier<any>[];
getLayout?: getLayout?:
| QueryPage<{ page: ReactElement }> | QueryPage<{ page: ReactElement }>
| { Layout: QueryPage<{ page: ReactElement }>; props: object }; | { 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 { Recommanded } from "./recommanded";
import { VerticalRecommanded } from "./vertical"; import { VerticalRecommanded } from "./vertical";
import { NewsList } from "./news"; import { NewsList } from "./news";
import { useLayoutEffect, useState } from "react";
export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => { export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
const [isClient, setClient] = useState(false);
useLayoutEffect(() => setClient(true), []);
return ( return (
<ScrollView> <ScrollView>
<Fetch query={Header.query()}> <Fetch query={Header.query()}>
@ -57,11 +61,7 @@ export const HomePage: QueryPage<{}, Genre> = ({ randomItems }) => {
<GenreGrid key={x} genre={x} /> <GenreGrid key={x} genre={x} />
))} ))}
<VerticalRecommanded /> <VerticalRecommanded />
{randomItems {isClient && randomItems.filter((_, i) => i >= 6).map((x) => <GenreGrid key={x} genre={x} />)}
.filter((_, i) => i >= 6)
.map((x) => (
<GenreGrid key={x} genre={x} />
))}
</ScrollView> </ScrollView>
); );
}; };
@ -70,10 +70,10 @@ HomePage.randomItems = [...Object.values(Genre)];
HomePage.getLayout = { Layout: DefaultLayout, props: { transparent: true } }; HomePage.getLayout = { Layout: DefaultLayout, props: { transparent: true } };
HomePage.getFetchUrls = () => [ HomePage.getFetchUrls = (_, randomItems) => [
Header.query(), Header.query(),
NewsList.query(), NewsList.query(),
...Object.values(Genre).map((x) => GenreGrid.query(x)), ...randomItems.filter((_, i) => i < 6).map((x) => GenreGrid.query(x)),
Recommanded.query(), Recommanded.query(),
VerticalRecommanded.query(), VerticalRecommanded.query(),
]; ];