From 61e970bb8c75c6edb279447be3f7ca8a00bd607d Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 03:36:32 +0000
Subject: mobile: Add support for loading states for bookmarks

---
 packages/mobile/components/ui/Skeleton.tsx | 38 ++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/mobile/components/ui/Skeleton.tsx

(limited to 'packages/mobile/components/ui/Skeleton.tsx')

diff --git a/packages/mobile/components/ui/Skeleton.tsx b/packages/mobile/components/ui/Skeleton.tsx
new file mode 100644
index 00000000..68b22e1e
--- /dev/null
+++ b/packages/mobile/components/ui/Skeleton.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import { Animated, type View } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: { className?: string } & React.ComponentPropsWithoutRef<typeof View>) {
+  const fadeAnim = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 0.5,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View
+      className={cn("bg-muted rounded-md", className)}
+      style={[{ opacity: fadeAnim }]}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
-- 
cgit v1.2.3-70-g09d2