Add skeleton hide animation.

Also hide the skeleton when the user has disabled js.

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 { SkeletonCss, ThemeSelector as KThemeSelector, WebTooltip } from "@kyoo/primitives";
+import { HiddenIfNoJs, 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";
@@ -69,6 +69,7 @@ const GlobalCssTheme = () => {
 			`}</style>
 			<WebTooltip theme={theme} />
 			<SkeletonCss />
+			<HiddenIfNoJs />
 		</>
 	);
 };

front/packages/primitives/src/index.ts

@@ -28,6 +28,8 @@ export * from "./image";
 export * from "./skeleton";
 export * from "./tooltip";
 
+export * from "./utils/nojs";
+
 import { px } from "yoshiki/native";
 
 export const ts = (spacing: number) => {

front/packages/primitives/src/skeleton.tsx

@@ -19,10 +19,11 @@
  */
 
 import { LinearGradient as LG } from "expo-linear-gradient";
-import { motify } from "moti";
+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 { hiddenIfNoJs } from "./utils/nojs";
 
 const LinearGradient = motify(LG)();
 
@@ -44,25 +45,25 @@ export const SkeletonCss = () => (
 
 export const Skeleton = ({
 	children,
+	show,
 	variant = "text",
 	...props
 }: Omit<ViewProps, "children"> & {
 	children?: JSX.Element | boolean | null;
+	show?: boolean;
 	variant?: "text" | "round" | "custom";
 }) => {
 	const { css, theme } = useYoshiki();
 	const [width, setWidth] = useState<number | undefined>(undefined);
 	const perc = (v: number) => (v / 100) * width!;
 
-	if (children && children !== true) return children;
+	if (show === undefined && children && children !== true) return children;
 
 	return (
 		<View
-			onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
 			{...css(
 				[
 					{
-						bg: (theme) => theme.overlay0,
 						margin: px(2),
 						position: "relative",
 						overflow: "hidden",
@@ -79,34 +80,58 @@ export const Skeleton = ({
 				props,
 			)}
 		>
-			<LinearGradient
+			<AnimatePresence>
-				start={{ x: 0, y: 0.5 }}
+				{children}
-				end={{ x: 1, y: 0.5 }}
+				{show && (
-				colors={["transparent", theme.overlay1, "transparent"]}
+					<MotiView
-				transition={{
+						key="skeleton"
-					loop: true,
+						animate={{ opacity: "1" }}
-					repeatReverse: false,
+						exit={{ opacity: 0 }}
-				}}
+						transition={{ type: "timing" }}
-				animate={{
+						onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
-					translateX: width
+						{...css(
-						? [perc(-100), { value: perc(100), type: "timing", duration: 800, delay: 800 }]
+							{
-						: undefined,
+								bg: (theme) => theme.overlay0,
-				}}
+								position: "absolute",
-				{...css([
+								top: 0,
-					{
+								bottom: 0,
-						position: "absolute",
+								left: 0,
-						top: 0,
+								right: 0,
-						bottom: 0,
+							},
-						left: 0,
+							hiddenIfNoJs,
-						right: 0,
+						)}
-					},
+					>
-					Platform.OS === "web" && {
+						<LinearGradient
-						// @ts-ignore Web only properties
+							start={{ x: 0, y: 0.5 }}
-						animation: "skeleton 1.6s linear 0.5s infinite",
+							end={{ x: 1, y: 0.5 }}
-						transform: "translateX(-100%)",
+							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%)",
+								},
+							])}
+						/>
+					</MotiView>
+				)}
+			</AnimatePresence>
 		</View>
 	);
 };

front/packages/primitives/src/utils/nojs.tsx

@@ -0,0 +1,35 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { ViewProps } from "react-native";
+
+export const hiddenIfNoJs: ViewProps = { style: { $$css: true, noJs: "noJsHidden" } as any };
+
+export const HiddenIfNoJs = () => (
+	<noscript>
+		<style>
+			{`
+				.noJsHidden {
+					display: none;
+				}
+			`}
+		</style>
+	</noscript>
+);