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

Clean up episode list skeleton

Browse Source
This commit is contained in:
Zoe Roux 2022-12-16 12:58:47 +09:00
parent 1ee955fbfe
commit eabf5e1faf
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
front/packages/primitives/src/skeleton.tsx
View File

@ -22,7 +22,7 @@ import { LinearGradient as LG } from "expo-linear-gradient";
import { AnimatePresence, motify, MotiView } from "moti";
import { useState } from "react";
import { Platform, View, ViewProps } from "react-native";
import { px, rem, useYoshiki, percent } from "yoshiki/native";
import { px, rem, useYoshiki, percent, em } from "yoshiki/native";
import { hiddenIfNoJs } from "./utils/nojs";
const LinearGradient = motify(LG)();
@ -53,7 +53,7 @@ export const Skeleton = ({
children?: JSX.Element | JSX.Element[] | boolean | null;
show?: boolean;
lines?: number;
variant?: "text" | "header" | "round" | "custom" | "fill";
variant?: "text" | "header" | "round" | "custom" | "fill" | "filltext";
}) => {
const { css, theme } = useYoshiki();
const [width, setWidth] = useState<number | undefined>(undefined);
@ -91,6 +91,10 @@ export const Skeleton = ({
width: percent(100),
height: percent(100),
},
variant === "filltext" && {
width: percent(100),
height: em(1),
},
],
props,
)}

4
front/packages/ui/src/details/episode.tsx
View File

@ -90,8 +90,8 @@ export const EpisodeLine = ({
props,
)}
>
<P {...css({ width: rem(4), flexShrink: 0, m: ts(1) })}>
{isLoading ? <Skeleton variant="fill" /> : displayNumber}
<P {...css({ width: rem(4), flexShrink: 0, m: ts(1), textAlign: "center" })}>
{isLoading ? <Skeleton variant="filltext" /> : displayNumber}
</P>
<Image
src={thumbnail}

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

@ -19,7 +19,7 @@
*/
import { Episode, EpisodeP, QueryIdentifier, Season } from "@kyoo/models";
import { Container, SwitchVariant } from "@kyoo/primitives";
import { Container, SwitchVariant, ts } from "@kyoo/primitives";
import Svg, { SvgProps, Path } from "react-native-svg";
import { Stylable } from "yoshiki/native";
import { View } from "react-native";
@ -73,7 +73,7 @@ export const SeasonTab = ({
<SwitchVariant>
{({ css, theme }) => (
<View>
<SvgWave fill={theme.background} />
<SvgWave fill={theme.background} {...css({ marginTop: { xs: ts(2), md: 0 } })} />
<View {...css({ bg: (theme) => theme.background }, props)}>
<Container>
{/* <Tabs value={season} onChange={(_, i) => setSeason(i)} aria-label="List of seasons"> */}