mobile: Add loading spinners when the data is being fetched

2 files changed, 11 insertions, 2 deletions

diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
index 0a57695c..8e408709 100644
--- a/packages/mobile/components/bookmarks/BookmarkList.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -3,6 +3,7 @@ import { Text, View } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
 
 import BookmarkCard from "./BookmarkCard";
+import FullPageSpinner from "../ui/FullPageSpinner";
 
 import { api } from "@/lib/trpc";
 
@@ -29,8 +30,7 @@ export default function BookmarkList({
   }, [isPending, isPlaceholderData]);
 
   if (isPending || !data) {
-    // TODO: Add a spinner
-    return;
+    return <FullPageSpinner />;
   }
 
   const onRefresh = () => {
diff --git a/packages/mobile/components/ui/FullPageSpinner.tsx b/packages/mobile/components/ui/FullPageSpinner.tsx
new file mode 100644
index 00000000..01187f11
--- /dev/null
+++ b/packages/mobile/components/ui/FullPageSpinner.tsx
@@ -0,0 +1,9 @@
+import { View, ActivityIndicator } from "react-native";
+
+export default function FullPageSpinner() {
+  return (
+    <View className="h-full w-full items-center justify-center">
+      <ActivityIndicator />
+    </View>
+  );
+}