Add a skeleton component

front/packages/models/package.json

@@ -8,6 +8,7 @@
 		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
+		"@tanstack/react-query": "*",
 		"react": "*",
 		"react-native": "*"
 	},
@@ -17,7 +18,6 @@
 		}
 	},
 	"dependencies": {
-		"@tanstack/react-query": "^4.18.0",
 		"zod": "^3.19.1"
 	}
 }

front/packages/primitives/src/skeleton.tsx

@@ -18,4 +18,16 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-export { Skeleton } from "moti/skeleton";
+import { View } from "moti";
+import { Skeleton as MSkeleton } from "moti/skeleton";
+import { ComponentProps } from "react";
+import { useYoshiki, rem, px, Stylable } from "yoshiki/native";
+
+export const Skeleton = ({ style, ...props }: ComponentProps<typeof MSkeleton> & Stylable) => {
+	const { css } = useYoshiki();
+	return (
+		<View {...css({ margin: px(2) }, { style })}>
+			<MSkeleton colorMode="light" radius={6} height={rem(1.2)} {...props} />
+		</View>
+	);
+};

front/packages/ui/package.json

@@ -13,6 +13,7 @@
 		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
+		"@tanstack/react-query": "*",
 		"expo-linear-gradient": "*",
 		"moti": "*",
 		"react": "*",

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

@@ -20,7 +20,7 @@
 
 import useTranslation from "next-translate/useTranslation";
 import { Library, LibraryP, Page, Paged, QueryIdentifier } from "@kyoo/models";
-import { useYoshiki } from "yoshiki/native";
+import { rem, useYoshiki } from "yoshiki/native";
 import { IconButton, Header, Avatar, A, Skeleton, ts } from "@kyoo/primitives";
 import { Text, View } from "react-native";
 import { Fetch } from "../fetch";
@@ -86,18 +86,10 @@ export const Navbar = () => {
 								{library.name}
 							</A>
 						) : (
-							<>
-								<Text>Toto</Text>
-								{/* <Typography key={i} variant="button" px=".25rem"> */}
-								{/* 	<Skeleton width="5rem" /> */}
-								{/* </Typography> */}
-							</>
+							<Skeleton key={i} width={rem(5)} colorMode="light" />
 						)
 					}
 				</Fetch>
-				<Skeleton>
-					<Text>Toto</Text>
-				</Skeleton>
 			</View>
 			<A href="/auth/login" {...tooltip(t("navbar.login"))}>
 				<Avatar alt={t("navbar.login")} size={30} />

front/yarn.lock

@@ -2280,11 +2280,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@kyoo/models@workspace:packages/models"
   dependencies:
-    "@tanstack/react-query": ^4.18.0
     "@types/react": ^18.0.25
     typescript: ^4.9.3
     zod: ^3.19.1
   peerDependencies:
+    "@tanstack/react-query": "*"
     react: "*"
     react-native: "*"
   peerDependenciesMeta:
@@ -2326,6 +2326,7 @@ __metadata:
     react-native-svg: ^13.6.0
     typescript: ^4.9.3
   peerDependencies:
+    "@tanstack/react-query": "*"
     expo-linear-gradient: "*"
     moti: "*"
     react: "*"