Create a homemade skeleton

with moti and css animations

front/apps/web/src/pages/_app.tsx

@@ -24,7 +24,7 @@ import { ReactNode, useState } from "react";
 import NextApp, { AppContext, type AppProps } from "next/app";
 import { createTheme, ThemeProvider as MTheme } from "@mui/material";
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
-import { ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
+import { SkeletonCss, ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
 import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo/models";
 import { useTheme, useMobileHover } from "yoshiki/web";
 import superjson from "superjson";
@@ -68,6 +68,7 @@ const GlobalCssTheme = () => {
 				}
 			`}</style>
 			<WebTooltip theme={theme} />
+			<SkeletonCss />
 		</>
 	);
 };

front/packages/primitives/src/skeleton.tsx

@@ -18,24 +18,95 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { View } from "moti";
+import { LinearGradient as LG } from "expo-linear-gradient";
-import { Skeleton as MSkeleton } from "moti/skeleton";
+import { motify } from "moti";
-import { ComponentProps } from "react";
+import { useState } from "react";
-import { useYoshiki, rem, px, Stylable } from "yoshiki/native";
+import { Platform, View, ViewProps } from "react-native";
+import { px, rem, useYoshiki, percent } from "yoshiki/native";
+
+const LinearGradient = motify(LG)();
+
+export const SkeletonCss = () => (
+	<style jsx global>{`
+		@keyframes skeleton {
+			0% {
+				transform: translateX(-100%);
+			}
+			50% {
+				transform: translateX(100%);
+			}
+			100% {
+				transform: translateX(100%);
+			}
+		}
+	`}</style>
+);
 
 export const Skeleton = ({
-	style,
 	children,
+	variant = "text",
 	...props
-}: Omit<ComponentProps<typeof MSkeleton>, "children"> & {
+}: Omit<ViewProps, "children"> & {
-	children: ComponentProps<typeof MSkeleton>["children"] | boolean;
+	children?: JSX.Element | boolean | null;
-} & Stylable) => {
+	variant?: "text" | "round" | "custom";
-	const { css } = useYoshiki();
+}) => {
+	const { css, theme } = useYoshiki();
+	const [width, setWidth] = useState<number | undefined>(undefined);
+	const perc = (v: number) => (v / 100) * width!;
+
+	if (children && children !== true) return children;
+
 	return (
-		<View {...css({ margin: px(2) }, { style })}>
+		<View
-			<MSkeleton colorMode="light" radius={6} height={rem(1.2)} {...props}>
+			onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
-				{children !== true ? children || undefined : undefined}
+			{...css(
-			</MSkeleton>
+				[
+					{
+						bg: (theme) => theme.overlay0,
+						margin: px(2),
+						position: "relative",
+						overflow: "hidden",
+						borderRadius: px(6),
+					},
+					variant === "text" && {
+						width: percent(75),
+						height: rem(1.2),
+					},
+					variant === "round" && {
+						borderRadius: 9999999,
+					},
+				],
+				props,
+			)}
+		>
+			<LinearGradient
+				start={{ x: 0, y: 0.5 }}
+				end={{ x: 1, y: 0.5 }}
+				colors={["transparent", theme.overlay1, "transparent"]}
+				transition={{
+					loop: true,
+					repeatReverse: false,
+				}}
+				animate={{
+					translateX: width
+						? [perc(-100), { value: perc(100), type: "timing", duration: 800, delay: 800 }]
+						: undefined,
+				}}
+				{...css([
+					{
+						position: "absolute",
+						top: 0,
+						bottom: 0,
+						left: 0,
+						right: 0,
+					},
+					Platform.OS === "web" && {
+						// @ts-ignore Web only properties
+						animation: "skeleton 1.6s linear 0.5s infinite",
+						transform: "translateX(-100%)",
+					},
+				])}
+			/>
 		</View>
 	);
 };

front/packages/primitives/src/themes/catppuccin.ts

@@ -29,8 +29,8 @@ export const catppuccin: ThemeBuilder = {
 	light: {
 		// Catppuccin latte
 		appbar: "#e64553",
-		contrast: "#cdd6f4",
+		overlay0: "#9ca0b0",
-		subcontrast: "#bac2de",
+		overlay1: "#7c7f93",
 		default: {
 			background: "#eff1f5",
 			accent: "#ea76cb",
@@ -59,8 +59,8 @@ export const catppuccin: ThemeBuilder = {
 	dark: {
 		// Catppuccin mocha
 		appbar: "#94e2d5",
-		contrast: "#cdd6f4",
+		overlay0: "#6c7086",
-		subcontrast: "#bac2de",
+		overlay1: "#9399b2",
 		default: {
 			background: "#1e1e2e",
 			accent: "##f5c2e7",

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

@@ -33,20 +33,17 @@ type ThemeSettings = {
 
 type Mode = {
 	appbar: Property.Color;
-	/*
+	overlay0: Property.Color;
-	 * The color used in texts or button that are hover black shades on images (ShowHeader, player...)
+	overlay1: Property.Color;
-	 */
-	contrast: Property.Color;
-	subcontrast: Property.Color;
 	variant: Variant;
 	colors: {
-		red: Property.Color,
+		red: Property.Color;
-		green: Property.Color,
+		green: Property.Color;
-		blue: Property.Color,
+		blue: Property.Color;
-		yellow: Property.Color,
+		yellow: Property.Color;
-		white: Property.Color,
+		white: Property.Color;
-		black: Property.Color,
+		black: Property.Color;
-	}
+	};
 };
 
 type Variant = {

front/packages/ui/src/layout.tsx

@@ -33,4 +33,4 @@ export const DefaultLayout = (page: ReactElement) => {
 	);
 };
 
-DefaultLayout.query = () => [Navbar.query()];
+DefaultLayout.getFetchUrls = () => [Navbar.query()];

front/packages/ui/src/navbar/index.tsx

@@ -95,7 +95,7 @@ export const Navbar = (props: Stylable) => {
 								{library.name}
 							</A>
 						) : (
-							<Skeleton key={i} width={rem(5)} colorMode="light" />
+							<Skeleton key={i} {...css({ width: rem(5) })} />
 						)
 					}
 				</Fetch>