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

Reduce the number of placeholder

Browse Source
This commit is contained in:
Zoe Roux 2023-11-28 16:46:23 +01:00
parent 9a5c4ab087
commit 9609fb150a
8 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/packages/ui/src/browse/index.tsx
View File

@ -73,7 +73,6 @@ export const BrowsePage: QueryPage = () => {
return ( return (
<InfiniteFetch <InfiniteFetch
query={query(sortKey, sortOrd)} query={query(sortKey, sortOrd)}
placeholderCount={15}
layout={LayoutComponent.layout} layout={LayoutComponent.layout}
Header={ Header={
<BrowseSettings <BrowseSettings

2
front/packages/ui/src/collection/index.tsx
View File

@ -145,7 +145,7 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
return ( return (
<InfiniteFetch <InfiniteFetch
query={query(slug)} query={query(slug)}
placeholderCount={15} placeholderCount={2}
layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }} layout={{ ...ItemDetails.layout, numColumns: { xs: 1, md: 2 } }}
Header={CollectionHeader} Header={CollectionHeader}
headerProps={{ slug }} headerProps={{ slug }}

1
front/packages/ui/src/details/season.tsx
View File

@ -122,7 +122,6 @@ export const EpisodeList = <Props,>({
return ( return (
<InfiniteFetch <InfiniteFetch
query={EpisodeList.query(slug, season)} query={EpisodeList.query(slug, season)}
placeholderCount={10}
layout={EpisodeLine.layout} layout={EpisodeLine.layout}
empty={t("show.episode-none")} empty={t("show.episode-none")}
divider divider

69
front/packages/ui/src/details/staff.tsx
View File

@ -18,39 +18,38 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { Person, PersonP, QueryIdentifier } from "@kyoo/models"; // import { Person, PersonP, QueryIdentifier } from "@kyoo/models";
import { useTranslation } from "react-i18next"; // import { useTranslation } from "react-i18next";
import { InfiniteFetch } from "../fetch-infinite"; // import { InfiniteFetch } from "../fetch-infinite";
import { PersonAvatar } from "./person"; // import { PersonAvatar } from "./person";
export const Staff = ({ slug }: { slug: string }) => { // export const Staff = ({ slug }: { slug: string }) => {
const { t } = useTranslation(); // const { t } = useTranslation();
//
return ( // return (
<InfiniteFetch // <InfiniteFetch
query={Staff.query(slug)} // query={Staff.query(slug)}
horizontal // horizontal
layout={{ numColumns: 1, size: PersonAvatar.width }} // layout={{ numColumns: 1, size: PersonAvatar.width }}
empty={t("show.staff-none")} // empty={t("show.staff-none")}
placeholderCount={20} // >
> // {(item, key) => (
{(item, key) => ( // <PersonAvatar
<PersonAvatar // key={key}
key={key} // isLoading={item.isLoading}
isLoading={item.isLoading} // slug={item?.slug}
slug={item?.slug} // name={item?.name}
name={item?.name} // role={item?.type ? `${item?.type} (${item?.role})` : item?.role}
role={item?.type ? `${item?.type} (${item?.role})` : item?.role} // poster={item?.poster}
poster={item?.poster} // // sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }}
// sx={{ width: { xs: "7rem", lg: "10rem" }, flexShrink: 0, px: 2 }} // />
/> // )}
)} // </InfiniteFetch>
</InfiniteFetch> // );
); // };
}; //
// Staff.query = (slug: string): QueryIdentifier<Person> => ({
Staff.query = (slug: string): QueryIdentifier<Person> => ({ // parser: PersonP,
parser: PersonP, // path: ["shows", slug, "people"],
path: ["shows", slug, "people"], // infinite: true,
infinite: true, // });
});

2
front/packages/ui/src/fetch-infinite.tsx
View File

@ -26,7 +26,7 @@ import { EmptyView, ErrorView, Layout, WithLoading, addHeader } from "./fetch";
export const InfiniteFetchList = <Data, Props, _>({ export const InfiniteFetchList = <Data, Props, _>({
query, query,
placeholderCount = 15, placeholderCount = 2,
incremental = false, incremental = false,
children, children,
layout, layout,

2
front/packages/ui/src/fetch-infinite.web.tsx
View File

@ -137,7 +137,7 @@ const InfiniteScroll = <Props,>({
export const InfiniteFetchList = <Data, _, HeaderProps>({ export const InfiniteFetchList = <Data, _, HeaderProps>({
query, query,
incremental = false, incremental = false,
placeholderCount = 15, placeholderCount = 2,
children, children,
layout, layout,
empty, empty,

2
front/packages/ui/src/home/genre.tsx
View File

@ -76,7 +76,7 @@ export const GenreGrid = ({ genre }: { genre: Genre }) => {
<InfiniteFetchList <InfiniteFetchList
query={query} query={query}
layout={{ ...ItemGrid.layout, layout: "horizontal" }} layout={{ ...ItemGrid.layout, layout: "horizontal" }}
placeholderCount={10} placeholderCount={2}
empty={displayEmpty.current ? t("home.none") : undefined} empty={displayEmpty.current ? t("home.none") : undefined}
> >
{(x, i) => { {(x, i) => {

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

@ -59,7 +59,6 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
return ( return (
<InfiniteFetch <InfiniteFetch
query={query(q, sortKey, sortOrd)} query={query(q, sortKey, sortOrd)}
placeholderCount={15}
layout={LayoutComponent.layout} layout={LayoutComponent.layout}
empty={t("search.empty")} empty={t("search.empty")}
Header={ Header={