mobile: Add loading spinners when the data is being fetched

3 files changed, 13 insertions, 4 deletions

diff --git a/packages/mobile/app/dashboard/lists/[slug].tsx b/packages/mobile/app/dashboard/lists/[slug].tsx
index 5ebc4446..54744874 100644
--- a/packages/mobile/app/dashboard/lists/[slug].tsx
+++ b/packages/mobile/app/dashboard/lists/[slug].tsx
@@ -2,6 +2,7 @@ import { useLocalSearchParams, Stack } from "expo-router";
 import { View } from "react-native";
 
 import BookmarkList from "@/components/bookmarks/BookmarkList";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { api } from "@/lib/trpc";
 
 export default function ListView() {
@@ -12,8 +13,7 @@ export default function ListView() {
   const { data: list } = api.lists.get.useQuery({ listId: slug });
 
   if (!list) {
-    // TODO: Spinner
-    return <View />;
+    return <FullPageSpinner />;
   }
 
   return (
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>
+  );
+}