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; customIcon?: ReactElement | Falsy;
icon: Icon; icon: Icon;
label: string; label: string | ReactElement;
description: string; description: string | ReactElement;
children?: ReactNode; children?: ReactNode;
}) => { }) => {
const { css } = useYoshiki(); 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 { 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 { useTranslation } from "react-i18next";
import { ImageBackground } from "react-native"; import { ImageBackground } from "react-native";
import { useYoshiki } from "yoshiki/native"; import { rem, useYoshiki } from "yoshiki/native";
import { ErrorView } from "../errors"; import { ErrorView } from "../errors";
import { Preference, SettingsContainer } from "./base"; import { Preference, SettingsContainer } from "./base";
@ -72,7 +72,17 @@ export const OidcSettings = () => {
/> />
</Preference> </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> </SettingsContainer>
); );
}; };