diff --git a/client/components/skeleton/index.tsx b/client/components/skeleton/index.tsx
deleted file mode 100644
index a11614dfd..000000000
--- a/client/components/skeleton/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { RSkeleton } from '@packrat/ui';
-
-export const TableLoader = () => {
-  return <RSkeleton />;
-};
diff --git a/packages/ui/src/RSkeleton/RSkeleton.tsx b/packages/ui/src/RSkeleton/RSkeleton.tsx
new file mode 100644
index 000000000..30325cf0b
--- /dev/null
+++ b/packages/ui/src/RSkeleton/RSkeleton.tsx
@@ -0,0 +1,22 @@
+import { Animated, Text } from 'react-native';
+import { useSkeletonAnimation } from './useSkeletonAnimation';
+
+export const RSkeleton = ({ style }) => {
+  const fadeAnim = useSkeletonAnimation();
+
+  return (
+    <Animated.View
+      style={{
+        opacity: fadeAnim,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#e2e1eb',
+        width: '100%',
+        borderRadius: '4px',
+        ...style,
+      }}
+    >
+      <Text style={{ fontSize: '24px' }}> </Text>
+    </Animated.View>
+  );
+};
diff --git a/packages/ui/src/RSkeleton/index.tsx b/packages/ui/src/RSkeleton/index.tsx
index 39505b960..5092b12ed 100644
--- a/packages/ui/src/RSkeleton/index.tsx
+++ b/packages/ui/src/RSkeleton/index.tsx
@@ -1,44 +1 @@
-import { useState, useEffect } from 'react';
-import { Animated, Text } from 'react-native';
-
-const RSkeleton = ({style}) => {
-  const [fadeAnim] = useState(new Animated.Value(1)); // Initial opacity set to 0
-
-  useEffect(() => {
-    const startAnimation = () => {
-      Animated.loop(
-        Animated.sequence([
-          Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 1000,
-            useNativeDriver: false, // Add this if you encounter any issues with native driver
-          }),
-          Animated.timing(fadeAnim, {
-            toValue: 1,
-            duration: 1000,
-            useNativeDriver: false, // Add this if you encounter any issues with native driver
-          }),
-        ]),
-      ).start();
-    };
-    startAnimation();
-  }, [fadeAnim]);
-
-  return (
-    <Animated.View
-      style={{
-        opacity: fadeAnim,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#e2e1eb',
-        width: "100%",
-        borderRadius: "4px",
-        ...style
-      }}
-    >
-      <Text style={{fontSize: "24px"}}>{' '}</Text>
-    </Animated.View>
-  );
-};
-
-export default RSkeleton;
+export { RSkeleton } from './RSkeleton';
diff --git a/packages/ui/src/RSkeleton/useSkeletonAnimation.ts b/packages/ui/src/RSkeleton/useSkeletonAnimation.ts
new file mode 100644
index 000000000..2efab5717
--- /dev/null
+++ b/packages/ui/src/RSkeleton/useSkeletonAnimation.ts
@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export const useSkeletonAnimation = () => {
+  const fadeAnim = useRef(new Animated.Value(1));
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(fadeAnim.current, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: false, // Add this if you encounter any issues with native driver
+        }),
+        Animated.timing(fadeAnim.current, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: false, // Add this if you encounter any issues with native driver
+        }),
+      ]),
+    ).start();
+  }, []);
+
+  return fadeAnim.current;
+};
diff --git a/packages/ui/src/Skeleton/index.tsx b/packages/ui/src/Skeleton/index.tsx
deleted file mode 100644
index 3e2084902..000000000
--- a/packages/ui/src/Skeleton/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Center, Skeleton, VStack } from 'native-base';
-
-export { Skeleton } from 'native-base';
-
-const TableLoader = () => {
-  return (
-    <Center w="100%">
-      <VStack
-        w="100%"
-        borderWidth="1"
-        space={8}
-        overflow="hidden"
-        rounded="md"
-        _dark={{
-          borderColor: 'coolGray.500',
-        }}
-        _light={{
-          borderColor: 'coolGray.200',
-        }}
-      >
-        <Skeleton h="16" />
-        <Skeleton.Text px="4" />
-      </VStack>
-    </Center>
-  );
-};
-
-export default TableLoader;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 3269b5c23..fe8cbc922 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -6,7 +6,6 @@ import RParagraph from './Rparagraph';
 import RInput from './RInput';
 import RImage from './RImage';
 import RScrollView from './RScrollview';
-import RSkeleton from './RSkeleton';
 import RSwitch from './RSwitch';
 import RIconButton from './RIconButton';
 import RSeparator from './RSeparator';
@@ -27,6 +26,8 @@ import XStack from './XStack';
 import YStack from './YStack';
 import RButton from './RButton';
 
+export { RSkeleton } from './RSkeleton';
+
 export {
   RH1,
   RH2,
@@ -52,7 +53,6 @@ export {
   RIconButton,
   RImage,
   RScrollView,
-  RSkeleton,
   XStack,
   YStack,
   RButton,
@@ -71,7 +71,6 @@ export * from './Rparagraph';
 export * from './RInput';
 export * from './RImage';
 export * from './RScrollview';
-export * from './Skeleton';
 export * from './XStack';
 export * from './YStack';