From f3fb96504afb0525e96ec8e3c9951097c43e0711 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 20 May 2024 21:55:03 +0200 Subject: [PATCH] Split loaders for user list --- front/packages/primitives/src/avatar.tsx | 27 ++++++++++-- front/packages/primitives/src/icons.tsx | 2 +- front/packages/ui/src/admin/users.tsx | 49 ++++++++++++++-------- front/packages/ui/src/collection/index.tsx | 35 ++++++++-------- front/packages/ui/src/search/index.tsx | 6 +-- 5 files changed, 75 insertions(+), 44 deletions(-) diff --git a/front/packages/primitives/src/avatar.tsx b/front/packages/primitives/src/avatar.tsx index a2bcea47..55fdb497 100644 --- a/front/packages/primitives/src/avatar.tsx +++ b/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>; } & 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< ); }); + +const AvatarLoader = ({ size = px(24), ...props }: { size?: number }) => { + const { css } = useYoshiki(); + + return ( + + ); +}; + +export const Avatar = { ...AvatarC, Loader: AvatarLoader }; diff --git a/front/packages/primitives/src/icons.tsx b/front/packages/primitives/src/icons.tsx index 3c504c33..9421624a 100644 --- a/front/packages/primitives/src/icons.tsx +++ b/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; diff --git a/front/packages/ui/src/admin/users.tsx b/front/packages/ui/src/admin/users.tsx index 6f621445..05c813e6 100644 --- a/front/packages/ui/src/admin/users.tsx +++ b/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 ( - + - -

{username}

-
+

{username}

{!isVerified && ( { + const { css } = useYoshiki(); + + return ( + + + + + + + + + ); +}; + UserGrid.layout = { size: px(150), numColumns: { xs: 2, sm: 3, md: 5, lg: 6, xl: 7 }, @@ -171,18 +182,20 @@ export const UserList = () => { return ( - - {(user) => ( + ( )} - + Loader={UserGrid.Loader} + /> ); }; diff --git a/front/packages/ui/src/collection/index.tsx b/front/packages/ui/src/collection/index.tsx index 8aa17a12..978cdec1 100644 --- a/front/packages/ui/src/collection/index.tsx +++ b/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 }) => ( )} - + Loader={ItemDetails.Loader} + /> ); }; diff --git a/front/packages/ui/src/search/index.tsx b/front/packages/ui/src/search/index.tsx index 8d88b3bb..89ba727e 100644 --- a/front/packages/ui/src/search/index.tsx +++ b/front/packages/ui/src/search/index.tsx @@ -77,9 +77,9 @@ export const SearchPage: QueryPage<{ q?: string }> = ({ q }) => { /> } contentContainerStyle={pageStyle} - > - {(item) => } - + Render={({ item }) => } + Loader={LayoutComponent.Loader} + /> ); };