Split loaders for user list

front/packages/primitives/src/avatar.tsx

@@ -24,6 +24,7 @@ import { Image, type ImageProps, View, type ViewStyle } from "react-native";
 import { type Stylable, px, useYoshiki } from "yoshiki/native";
 import { Icon } from "./icons";
 import { P } from "./text";
+import { Skeleton } from "./skeleton";
 
 const stringToColor = (string: string) => {
 	let hash = 0;
@@ -40,7 +41,7 @@ const stringToColor = (string: string) => {
 	return color;
 };
 
-export const Avatar = forwardRef<
+const AvatarC = forwardRef<
 	View,
 	{
 		src?: string;
@@ -48,12 +49,11 @@ export const Avatar = forwardRef<
 		size?: number;
 		placeholder?: string;
 		color?: string;
-		isLoading?: boolean;
 		fill?: boolean;
 		as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
 	} & Stylable
->(function Avatar(
-	{ src, alt, size = px(24), color, placeholder, isLoading = false, fill = false, as, ...props },
+>(function AvatarI(
+	{ src, alt, size = px(24), color, placeholder, fill = false, as, ...props },
 	ref,
 ) {
 	const { css, theme } = useYoshiki();
@@ -106,3 +106,22 @@ export const Avatar = forwardRef<
 		</Container>
 	);
 });
+
+const AvatarLoader = ({ size = px(24), ...props }: { size?: number }) => {
+	const { css } = useYoshiki();
+
+	return (
+		<Skeleton
+			variant="round"
+			{...css(
+				{
+					height: size,
+					width: size,
+				},
+				props,
+			)}
+		/>
+	);
+};
+
+export const Avatar = { ...AvatarC, Loader: AvatarLoader };

front/packages/primitives/src/icons.tsx

@@ -45,7 +45,7 @@ type IconProps = {
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
 	const { css, theme } = useYoshiki();
 	const computed = css(
-		{ width: size, height: size, fill: color ?? theme.contrast } as any,
+		{ width: size, height: size, fill: color ?? theme.contrast, flexShrink: 0 } as any,
 		props,
 	) as any;
 

front/packages/ui/src/admin/users.tsx

@@ -23,7 +23,7 @@ import { Alert, Avatar, Icon, IconButton, Menu, P, Skeleton, tooltip, ts } from
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { px, useYoshiki } from "yoshiki/native";
-import type { Layout, WithLoading } from "../fetch";
+import type { Layout } from "../fetch";
 import { InfiniteFetch } from "../fetch-infinite";
 import { SettingsContainer } from "../settings/base";
 
@@ -36,20 +36,19 @@ import Verifed from "@material-symbols/svg-400/rounded/verified_user.svg";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 export const UserGrid = ({
-	isLoading,
 	id,
 	username,
 	avatar,
 	isAdmin,
 	isVerified,
 	...props
-}: WithLoading<{
+}: {
 	id: string;
 	username: string;
 	avatar: string;
 	isAdmin: boolean;
 	isVerified: boolean;
-}>) => {
+}) => {
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 	const queryClient = useQueryClient();
@@ -66,11 +65,10 @@ export const UserGrid = ({
 	return (
 		<View {...css({ alignItems: "center" }, props)}>
 			<Avatar src={avatar} alt={username} placeholder={username} size={UserGrid.layout.size} fill />
-			<View {...css({ flexDirection: "row" })}>
+			<View {...css({ flexDirection: "row", alignItems: "center" })}>
 				<Icon
 					icon={!isVerified ? Unverifed : isAdmin ? Admin : UserI}
 					{...css({
-						alignSelf: "center",
 						m: ts(1),
 					})}
 					{...tooltip(
@@ -83,9 +81,7 @@ export const UserGrid = ({
 						),
 					)}
 				/>
-				<Skeleton>
 				<P>{username}</P>
-				</Skeleton>
 				<Menu Trigger={IconButton} icon={MoreVert} {...tooltip(t("misc.more"))}>
 					{!isVerified && (
 						<Menu.Item
@@ -159,6 +155,21 @@ export const UserGrid = ({
 	);
 };
 
+UserGrid.Loader = (props: object) => {
+	const { css } = useYoshiki();
+
+	return (
+		<View {...css({ alignItems: "center" }, props)}>
+			<Avatar.Loader size={UserGrid.layout.size} />
+			<View {...css({ flexDirection: "row", alignItems: "center", flexShrink: 1, flexGrow: 1 })}>
+				<Icon icon={UserI} {...css({ m: ts(1) })} />
+				<Skeleton {...css({ flexGrow: 1, width: ts(8) })} />
+				<IconButton icon={MoreVert} disabled />
+			</View>
+		</View>
+	);
+};
+
 UserGrid.layout = {
 	size: px(150),
 	numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 },
@@ -171,18 +182,20 @@ export const UserList = () => {
 
 	return (
 		<SettingsContainer title={t("admin.users.label")}>
-			<InfiniteFetch query={UserList.query()} layout={UserGrid.layout}>
-				{(user) => (
+			<InfiniteFetch
+				query={UserList.query()}
+				layout={UserGrid.layout}
+				Render={({ item }) => (
 					<UserGrid
-						isLoading={user.isLoading as any}
-						id={user.id}
-						username={user.username}
-						avatar={user.logo}
-						isAdmin={user.isAdmin}
-						isVerified={user.isVerified}
+						id={item.id}
+						username={item.username}
+						avatar={item.logo}
+						isAdmin={item.isAdmin}
+						isVerified={item.isVerified}
 					/>
 				)}
-			</InfiniteFetch>
+				Loader={UserGrid.Loader}
+			/>
 		</SettingsContainer>
 	);
 };

front/packages/ui/src/collection/index.tsx

@@ -155,30 +155,29 @@ export const CollectionPage: QueryPage<{ slug: string }> = ({ slug }) => {
 			Header={CollectionHeader}
 			headerProps={{ slug }}
 			contentContainerStyle={{ padding: 0, paddingHorizontal: 0, ...pageStyle }}
-		>
-			{(x) => (
+			Render={({ item }) => (
 				<ItemDetails
-					isLoading={x.isLoading as any}
-					slug={x.slug}
-					type={x.kind}
-					name={x.name}
-					tagline={"tagline" in x ? x.tagline : null}
-					overview={x.overview}
-					poster={x.poster}
-					subtitle={x.kind !== "collection" && !x.isLoading ? getDisplayDate(x) : undefined}
-					genres={"genres" in x ? x.genres : null}
-					href={x.href}
-					playHref={x.kind !== "collection" && !x.isLoading ? x.playHref : undefined}
-					watchStatus={
-						!x.isLoading && x.kind !== "collection" ? x.watchStatus?.status ?? null : null
-					}
+					slug={item.slug}
+					type={item.kind}
+					name={item.name}
+					tagline={"tagline" in item ? item.tagline : null}
+					overview={item.overview}
+					poster={item.poster}
+					subtitle={item.kind !== "collection" ? getDisplayDate(item) : null}
+					genres={"genres" in item ? item.genres : null}
+					href={item.href}
+					playHref={item.kind !== "collection" ? item.playHref : null}
+					watchStatus={(item.kind !== "collection" && item.watchStatus?.status) || null}
 					unseenEpisodesCount={
-						x.kind === "show" ? x.watchStatus?.unseenEpisodesCount ?? x.episodesCount! : null
+						item.kind === "show"
+							? item.watchStatus?.unseenEpisodesCount ?? item.episodesCount!
+							: null
 					}
 					{...css({ marginX: ItemGrid.layout.gap })}
 				/>
 			)}
-		</InfiniteFetch>
+			Loader={ItemDetails.Loader}
+		/>
 	);
 };
 

front/packages/ui/src/search/index.tsx

@@ -77,9 +77,9 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => {
 				/>
 			}
 			contentContainerStyle={pageStyle}
-		>
-			{(item) => <LayoutComponent {...itemMap(item)} />}
-		</InfiniteFetch>
+			Render={({ item }) => <LayoutComponent {...itemMap(item)} />}
+			Loader={LayoutComponent.Loader}
+		/>
 	);
 };