Install moti

front/apps/mobile/babel.config.js

@@ -25,6 +25,7 @@ module.exports = function (api) {
 		plugins: [
 			// NOTE: `expo-router/babel` is a temporary extension to `babel-preset-expo`.
 			require.resolve("expo-router/babel"),
+			"react-native-reanimated/plugin",
 		],
 	};
 };

front/apps/mobile/package.json

@@ -10,14 +10,18 @@
 	},
 	"dependencies": {
 		"@kyoo/ui": "workspace:^",
+		"@tanstack/react-query": "^4.19.1",
 		"expo": "^47.0.0",
 		"expo-constants": "~14.0.2",
+		"expo-linear-gradient": "~12.0.1",
 		"expo-linking": "~3.2.3",
 		"expo-router": "^0.0.36",
 		"expo-status-bar": "~1.4.2",
+		"moti": "^0.21.0",
 		"react": "18.1.0",
 		"react-dom": "18.1.0",
 		"react-native": "0.70.5",
+		"react-native-reanimated": "~2.12.0",
 		"react-native-safe-area-context": "4.4.1",
 		"react-native-screens": "~3.18.0",
 		"react-native-svg": "13.4.0",

front/apps/web/babel.config.js

@@ -22,5 +22,6 @@ module.exports = function (api) {
 	api.cache(true);
 	return {
 		presets: ["babel-preset-expo"],
+		/* plugins: ["react-native-reanimated/plugin"], */
 	};
 };

front/apps/web/next.config.js

@@ -29,7 +29,8 @@ const suboctopus = path.dirname(require.resolve("@jellyfin/libass-wasm"));
  * @type {import("next").NextConfig}
  */
 const nextConfig = {
-	reactStrictMode: true,
+	// FIXME: https://github.com/nandorojo/moti/issues/224
+	reactStrictMode: false,
 	swcMinify: true,
 	output: "standalone",
 	webpack: (config) => {
@@ -86,12 +87,15 @@ const nextConfig = {
 			"react-native",
 			"react-native-web",
 			"react-native-svg",
+			"react-native-reanimated",
+			"moti",
 			"yoshiki",
 			"@expo/vector-icons",
 			"@expo/html-elements",
 			"expo-font",
 			"expo-asset",
 			"expo-modules-core",
+			"expo-linear-gradient",
 		],
 	},
 };

front/apps/web/package.json

@@ -20,17 +20,22 @@
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.8.7",
 		"@mui/system": "^5.10.10",
+		"@tanstack/react-query": "^4.19.1",
 		"clsx": "^1.2.1",
 		"csstype": "^3.1.1",
+		"expo-linear-gradient": "^12.0.1",
 		"hls.js": "^1.2.8",
 		"jotai": "^1.10.0",
+		"moti": "^0.21.0",
 		"next": "13.0.5",
 		"next-fonts": "^1.5.1",
 		"next-translate": "^1.6.0",
 		"next-transpile-modules": "^10.0.0",
+		"raf": "^3.4.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-infinite-scroll-component": "^6.1.0",
+		"react-native-reanimated": "^2.13.0",
 		"react-native-web": "^0.18.10",
 		"solito": "^2.0.5",
 		"superjson": "^1.11.0",

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

@@ -18,7 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { ReactNode, useState } from "react";
+import "../polyfill";
+
+import { ReactNode, useState } from "react";
 import appWithI18n from "next-translate/appWithI18n";
 import { useTheme, useMobileHover } from "yoshiki/web";
 import { createTheme, ThemeProvider as MTheme } from "@mui/material";
@@ -29,19 +31,12 @@ import superjson from "superjson";
 import Head from "next/head";
 import { ThemeSelector as KThemeSelector } from "@kyoo/primitives";
 
-// Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details)
-if (typeof window === "undefined") {
-	React.useLayoutEffect = React.useEffect;
-}
-
 const ThemeSelector = ({ children }: { children?: ReactNode | ReactNode[] }) => {
 	// TODO: Handle user selected mode (light, dark, auto)
 	// TODO: Hande theme change.
 	return (
 		<MTheme theme={createTheme()}>
-			<KThemeSelector>
+			<KThemeSelector>{children}</KThemeSelector>
-				{children}
-			</KThemeSelector>
 		</MTheme>
 	);
 };

front/apps/web/src/polyfill.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 "raf/polyfill";
+import React from "react";
+
+// FIXME need reanimated update, see https://github.com/software-mansion/react-native-reanimated/issues/3355
+if (typeof window !== "undefined") {
+	// @ts-ignore
+	window._frameTimestamp = null;
+}
+// Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details)
+if (typeof window === "undefined") {
+	React.useLayoutEffect = React.useEffect;
+}

front/packages/primitives/package.json

@@ -8,8 +8,11 @@
 		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
+		"expo-linear-gradient": "*",
+		"moti": "*",
 		"react": "*",
 		"react-native": "*",
+		"react-native-reanimated": "*",
 		"yoshiki": "*"
 	},
 	"peerDependenciesMeta": {

front/packages/primitives/src/index.ts

@@ -25,6 +25,7 @@ export * from "./icons";
 export * from "./links";
 export * from "./avatar";
 export * from "./image";
+export * from "./skeleton";
 
 import { px } from "yoshiki/native";
 

front/packages/primitives/src/skeleton.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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/>.
+ */
+
+export { Skeleton } from "moti/skeleton";

front/packages/ui/package.json

@@ -13,8 +13,11 @@
 		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
+		"expo-linear-gradient": "*",
+		"moti": "*",
 		"react": "*",
 		"react-native": "*",
+		"react-native-reanimated": "*",
 		"yoshiki": "*"
 	},
 	"peerDependenciesMeta": {

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

@@ -20,8 +20,8 @@
 
 import useTranslation from "next-translate/useTranslation";
 import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
-import { IconButton, Header, Avatar, A, ts } from "@kyoo/primitives";
 import { useYoshiki } from "yoshiki/native";
+import { IconButton, Header, Avatar, A, Skeleton, ts } from "@kyoo/primitives";
 import { Text, View } from "react-native";
 import { Fetch } from "../fetch";
 import { KyooLongLogo } from "./icon";
@@ -95,6 +95,9 @@ export const Navbar = () => {
 						)
 					}
 				</Fetch>
+				<Skeleton>
+					<Text>Toto</Text>
+				</Skeleton>
 			</View>
 			<A href="/auth/login" {...tooltip(t("navbar.login"))}>
 				<Avatar alt={t("navbar.login")} size={30} />