Fix form keyboard issues and sticky footers in agent screens

src/components/Loader/index.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useEffect, useRef } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface LoaderProps {
+  size?: 'small' | 'large';
+  style?: StyleProp<ViewStyle>;
+}
+
+const LoaderComponent = ({ size = 'large', style }: LoaderProps) => {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.loader, style]}>
+      <ActivityIndicator color={theme.colors.accent} size={size} />
+    </View>
+  );
+};
+
+interface SkeletonBlockProps {
+  height?: number;
+  width?: number | `${number}%`;
+}
+
+export const SkeletonBlock = ({ height = 18, width = '100%' }: SkeletonBlockProps) => {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.35)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.75,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.35,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ]),
+    ).start();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={{
+        height,
+        width,
+        borderRadius: 999,
+        backgroundColor: theme.colors.cardGlass,
+        opacity,
+      }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  loader: {
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export const Loader = memo(LoaderComponent);