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

Add skeletons for linked services

Browse Source
This commit is contained in:
Zoe Roux 2024-03-08 19:32:10 +01:00
parent fef04409af
commit 830a518b86
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/packages/ui/src/settings/base.tsx
View File

@ -45,8 +45,8 @@ export const Preference = ({
}: {
customIcon?: ReactElement | Falsy;
icon: Icon;
label: string;
description: string;
label: string | ReactElement;
description: string | ReactElement;
children?: ReactNode;
}) => {
const { css } = useYoshiki();

16
front/packages/ui/src/settings/oidc.tsx
View File

@ -19,10 +19,10 @@
*/
import { QueryIdentifier, ServerInfo, ServerInfoP, useAccount, useFetch } from "@kyoo/models";
import { IconButton, tooltip, ts } from "@kyoo/primitives";
import { IconButton, Skeleton, tooltip, ts } from "@kyoo/primitives";
import { useTranslation } from "react-i18next";
import { ImageBackground } from "react-native";
import { useYoshiki } from "yoshiki/native";
import { rem, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors";
import { Preference, SettingsContainer } from "./base";
@ -72,7 +72,17 @@ export const OidcSettings = () => {
/>
</Preference>
))
) : null}
) : (
[...Array(3)].map((_, i) => (
<Preference
key={i}
customIcon={<Skeleton {...css({ width: ts(3), height: ts(3) })} />}
icon={null!}
label={<Skeleton {...css({ width: rem(6) })} />}
description={<Skeleton {...css({ width: rem(7), height: rem(0.8) })} />}
/>
))
)}
</SettingsContainer>
);
};