feat: show home screen until searchresults are loaded

apps/expo/src/app/(tabs)/index.tsx

@@ -1,8 +1,11 @@
 import { ScrollView, View } from "react-native";
 import { useSharedValue, withTiming } from "react-native-reanimated";
 
-import type { ItemData } from "~/components/item/item";
+import {
-import Item from "~/components/item/item";
+  bookmarks,
+  ItemListSection,
+  watching,
+} from "~/components/item/ItemListSection";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { Text } from "~/components/ui/Text";
 
@@ -21,44 +24,6 @@ export default function HomeScreen() {
     });
   };
 
-  const bookmarks: ItemData[] = [
-    {
-      id: "219651",
-      title: "Welcome to Samdal-ri",
-      posterUrl:
-        "https://www.themoviedb.org/t/p/w185/98IvA2i0PsTY8CThoHByCKOEAjz.jpg",
-      type: "tv",
-      year: 2023,
-    },
-    {
-      id: "194797",
-      title: "Doona!",
-      posterUrl:
-        "https://www.themoviedb.org/t/p/w185/bQhiOkU3lCu5pwCqPdNVG5GBLlj.jpg",
-      type: "tv",
-      year: 2023,
-    },
-  ];
-
-  const watching: ItemData[] = [
-    {
-      id: "113268",
-      title: "The Uncanny Counter",
-      posterUrl:
-        "https://www.themoviedb.org/t/p/w185/tKU34QiJUfVipcuhAs5S3TdCpAF.jpg",
-      type: "tv",
-      year: 2020,
-    },
-    {
-      id: "203508",
-      title: "Earth Arcade",
-      posterUrl:
-        "https://www.themoviedb.org/t/p/w185/vBJ0uF0WlFcjr9obZZqE6GSsKoL.jpg",
-      type: "tv",
-      year: 2022,
-    },
-  ];
-
   return (
     <View style={{ flex: 1 }}>
       <ScrollView
@@ -77,25 +42,8 @@ export default function HomeScreen() {
             </View>
           }
         >
-          <Text className="mb-2 mt-4 text-xl font-semibold">Bookmarks</Text>
+          <ItemListSection title="Bookmarks" items={bookmarks} />
-          <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          <ItemListSection title="Continue Watching" items={watching} />
-            {bookmarks?.map((item, index) => (
-              <View key={index} className="basis-1/2 px-3 pb-3">
-                <Item data={item} />
-              </View>
-            ))}
-          </View>
-
-          <Text className="mb-2 mt-4 text-xl font-semibold">
-            Continue Watching
-          </Text>
-          <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
-            {watching?.map((item, index) => (
-              <View key={index} className="basis-1/2 px-3 pb-3">
-                <Item data={item} />
-              </View>
-            ))}
-          </View>
         </ScreenLayout>
       </ScrollView>
     </View>

apps/expo/src/app/(tabs)/search/_layout.tsx

@@ -12,6 +12,11 @@ import { getMediaPoster, searchTitle } from "@movie-web/tmdb";
 
 import type { ItemData } from "~/components/item/item";
 import Item from "~/components/item/item";
+import {
+  bookmarks,
+  ItemListSection,
+  watching,
+} from "~/components/item/ItemListSection";
 import ScreenLayout from "~/components/layout/ScreenLayout";
 import { Text } from "~/components/ui/Text";
 import Searchbar from "./Searchbar";
@@ -20,12 +25,21 @@ export default function SearchScreen() {
   const [query, setQuery] = useState("");
   const translateY = useSharedValue(0);
   const fadeAnim = useSharedValue(1);
+  const [searchResultsLoaded, setSearchResultsLoaded] = useState(false);
 
-  const { data } = useQuery({
+  const { data, isSuccess } = useQuery({
     queryKey: ["searchResults", query],
     queryFn: () => fetchSearchResults(query),
   });
 
+  useEffect(() => {
+    if (isSuccess && data && data.length > 0) {
+      setSearchResultsLoaded(true);
+    } else {
+      setSearchResultsLoaded(false);
+    }
+  }, [data, isSuccess]);
+
   useEffect(() => {
     const keyboardWillShowListener = Keyboard.addListener(
       "keyboardWillShow",
@@ -91,13 +105,20 @@ export default function SearchScreen() {
             </View>
           }
         >
-          <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+          {searchResultsLoaded ? (
-            {data?.map((item, index) => (
+            <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
-              <View key={index} className="basis-1/2 px-3 pb-3">
+              {data?.map((item, index) => (
-                <Item data={item} />
+                <View key={index} className="basis-1/2 px-3 pb-3">
-              </View>
+                  <Item data={item} />
-            ))}
+                </View>
-          </View>
+              ))}
+            </View>
+          ) : (
+            <View style={{ flex: 1 }}>
+              <ItemListSection title="Bookmarks" items={bookmarks} />
+              <ItemListSection title="Continue Watching" items={watching} />
+            </View>
+          )}
         </ScreenLayout>
       </ScrollView>
       <Animated.View

apps/expo/src/components/item/ItemListSection.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Text, View } from "react-native";
+
+import type { ItemData } from "~/components/item/item";
+import Item from "~/components/item/item";
+
+export const bookmarks: ItemData[] = [
+  {
+    id: "219651",
+    title: "Welcome to Samdal-ri",
+    posterUrl:
+      "https://www.themoviedb.org/t/p/w185/98IvA2i0PsTY8CThoHByCKOEAjz.jpg",
+    type: "tv",
+    year: 2023,
+  },
+  {
+    id: "194797",
+    title: "Doona!",
+    posterUrl:
+      "https://www.themoviedb.org/t/p/w185/bQhiOkU3lCu5pwCqPdNVG5GBLlj.jpg",
+    type: "tv",
+    year: 2023,
+  },
+];
+
+export const watching: ItemData[] = [
+  {
+    id: "113268",
+    title: "The Uncanny Counter",
+    posterUrl:
+      "https://www.themoviedb.org/t/p/w185/tKU34QiJUfVipcuhAs5S3TdCpAF.jpg",
+    type: "tv",
+    year: 2020,
+  },
+  {
+    id: "203508",
+    title: "Earth Arcade",
+    posterUrl:
+      "https://www.themoviedb.org/t/p/w185/vBJ0uF0WlFcjr9obZZqE6GSsKoL.jpg",
+    type: "tv",
+    year: 2022,
+  },
+];
+
+export const ItemListSection = ({
+  title,
+  items,
+}: {
+  title: string;
+  items: ItemData[];
+}) => {
+  return (
+    <View>
+      <Text className="mb-2 mt-4 text-xl font-semibold">{title}</Text>
+      <View className="flex w-full flex-1 flex-row flex-wrap justify-start">
+        {items.map((item, index) => (
+          <View key={index} className="basis-1/2 px-3 pb-3">
+            <Item data={item} />
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};