Add a circular progress component

front/packages/models/src/resources/index.ts

@@ -28,3 +28,4 @@ export * from "./person";
 export * from "./studio";
 export * from "./episode";
 export * from "./season";
+export * from "./watch-item";

front/packages/primitives/src/icons.tsx

@@ -27,13 +27,16 @@ import { ts } from "./utils";
 
 type IconProps = {
 	icon: ComponentType<SvgProps>;
-	color: YoshikiStyle<string>;
+	color?: YoshikiStyle<string>;
 	size?: YoshikiStyle<number | string>;
 };
 
 export const Icon = ({ icon: Icon, color, size = 24, ...props }: IconProps) => {
-	const { css } = useYoshiki();
+	const { css, theme } = useYoshiki();
-	const computed = css({ width: size, height: size, fill: color } as ViewStyle, props);
+	const computed = css(
+		{ width: size, height: size, fill: color ?? theme.colors.white } as ViewStyle,
+		props,
+	);
 	return (
 		<Icon
 			{...Platform.select<SvgProps>({

front/packages/primitives/src/index.ts

@@ -29,6 +29,7 @@ export * from "./skeleton";
 export * from "./tooltip";
 export * from "./container";
 export * from "./divider";
+export * from "./progress";
 
 export * from "./animated";
 export * from "./utils";

front/packages/primitives/src/links.tsx

@@ -18,7 +18,6 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ViewStyle } from "@expo/html-elements/build/primitives/View";
 import { ComponentType, Fragment, ReactNode } from "react";
 import {
 	Platform,

front/packages/primitives/src/progress.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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 { Platform, View, ViewProps } from "react-native";
+import { Circle, Svg } from "react-native-svg";
+import { px, useYoshiki } from "yoshiki/native";
+
+// TODO: Use moti on native
+export const CircularProgress = ({
+	size = 48,
+	tickness = 5,
+	color,
+	...props
+}: { size?: number; tickness?: number; color?: string } & ViewProps) => {
+	const { css, theme } = useYoshiki();
+
+	return (
+		<View {...css({ width: size, height: size, overflow: "hidden" }, props)}>
+			<style jsx global>{`
+				@keyframes circularProgress-svg {
+					0% {
+						transform: rotate(0deg);
+					}
+					100% {
+						transform: rotate(360deg);
+					}
+				}
+				@keyframes circularProgress-circle {
+					0% {
+						stroke-dasharray: 1px, 200px;
+						stroke-dashoffset: 0;
+					}
+					50% {
+						stroke-dasharray: 100px, 200px;
+						stroke-dashoffset: -15px;
+					}
+					100% {
+						stroke-dasharray: 100px, 200px;
+						stroke-dashoffset: -125px;
+					}
+				}
+			`}</style>
+			<Svg
+				viewBox={`${size / 2} ${size / 2} ${size} ${size}`}
+				{...css(
+					Platform.OS === "web" && { animation: "circularProgress-svg 1.4s ease-in-out infinite" },
+				)}
+			>
+				<Circle
+					cx={size}
+					cy={size}
+					r={(size - tickness) / 2}
+					strokeWidth={tickness}
+					fill="none"
+					stroke={color ?? theme.accent}
+					strokeDasharray={[px(80), px(200)]}
+					{...css(
+						Platform.OS === "web" && {
+							animation: "circularProgress-circle 1.4s ease-in-out infinite",
+						},
+					)}
+				/>
+			</Svg>
+		</View>
+	);
+};

front/packages/ui/src/fetch.tsx

@@ -20,7 +20,6 @@
 
 import { Page, QueryIdentifier, useFetch, KyooErrors } from "@kyoo/models";
 import { Breakpoint, P } from "@kyoo/primitives";
-import { Fragment } from "react";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";