From 0593b939c6cb733b6131d7264d3296a031c0a988 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 15:00:34 +0000
Subject: mobile: Add loading spinners when the data is being fetched

---
 packages/mobile/app/dashboard/lists/[slug].tsx        | 4 ++--
 packages/mobile/components/bookmarks/BookmarkList.tsx | 4 ++--
 packages/mobile/components/ui/FullPageSpinner.tsx     | 9 +++++++++
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 packages/mobile/components/ui/FullPageSpinner.tsx

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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2