Clean up movie's skeleton

front/packages/primitives/src/skeleton.tsx

@@ -53,7 +53,7 @@ export const Skeleton = ({
 	children?: JSX.Element | JSX.Element[] | boolean | null;
 	show?: boolean;
 	lines?: number;
-	variant?: "text" | "round" | "custom";
+	variant?: "text" | "header" | "round" | "custom";
 }) => {
 	const { css, theme } = useYoshiki();
 	const [width, setWidth] = useState<number | undefined>(undefined);
@@ -69,12 +69,21 @@ export const Skeleton = ({
 						position: "relative",
 					},
 					lines === 1 && { overflow: "hidden", borderRadius: px(6) },
-					variant === "text" &&
-						lines === 1 && {
-							width: percent(75),
-							height: rem(1.2),
-							marginBottom: rem(0.5),
-						},
+					(variant === "text" || variant === "header") &&
+						lines === 1 && [
+							{
+								width: percent(75),
+								height: rem(1.2),
+								margin: px(2),
+							},
+							variant === "text" && {
+								margin: px(2),
+							},
+							variant === "header" && {
+								marginBottom: rem(0.5),
+							},
+						],
+
 					variant === "round" && {
 						borderRadius: 9999999,
 					},

front/packages/primitives/src/themes/theme.tsx

@@ -147,6 +147,9 @@ export const ContrastArea = ({
 				contrastText
 					? {
 							...theme,
+							// Keep the same skeletons, it looks weird otherwise.
+							overlay0: theme.user.overlay0,
+							overlay1: theme.user.overlay1,
 							heading: mode === "light" ? theme.colors.black : theme.colors.white,
 							paragraph: theme.heading,
 					  }

front/packages/ui/src/details/header.tsx

@@ -111,7 +111,10 @@ const TitleLine = ({
 						flexGrow: 1,
 					})}
 				>
-					<Skeleton {...css({ width: rem(15), height: rem(3) })}>
+					<Skeleton
+						variant="header"
+						{...css({ width: rem(15), height: rem(2.5), marginBottom: rem(1) })}
+					>
 						{isLoading || (
 							<H1
 								{...css({
@@ -129,6 +132,7 @@ const TitleLine = ({
 							{...css({
 								width: rem(5),
 								height: rem(1.5),
+								marginBottom: rem(0.5),
 							})}
 						>
 							{isLoading || (
@@ -184,12 +188,13 @@ const TitleLine = ({
 			>
 				<P
 					{...css({
-						color: (theme) => theme.user.paragraph,
+						color: (theme: Theme) => theme.user.paragraph,
+						display: "flex",
 					})}
 				>
 					{t("show.studio")}:{" "}
 					{isLoading ? (
-						<Skeleton />
+						<Skeleton {...css({ width: rem(5) })} />
 					) : (
 						<A href={`/studio/${studio!.slug}`} {...css({ color: (theme) => theme.user.link })}>
 							{studio!.name}
@@ -227,7 +232,7 @@ const Description = ({
 					<>
 						{i !== 0 && ", "}
 						{isLoading ? (
-							<Skeleton key={i} />
+							<Skeleton key={i} {...css({ width: rem(5) })} />
 						) : (
 							<A key={genre.slug} href={`/genres/${genre.slug}`}>
 								{genre.name}