Feat/Show Splashcreen until UI loaded (#437)

app/(auth)/(tabs)/(home)/index.tsx

@@ -36,6 +36,7 @@ import {
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useSplashScreenLoading, useSplashScreenVisible } from "@/providers/SplashScreenProvider";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -146,6 +147,10 @@ export default function index() {
     staleTime: 60 * 1000,
   });
 
+  // show splash screen until query loaded
+  useSplashScreenLoading(l1)
+  const splashScreenVisible = useSplashScreenVisible()
+
   const userViews = useMemo(
     () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
     [data, settings?.hiddenLibraries]
@@ -399,7 +404,9 @@ export default function index() {
       </View>
     );
 
-  if (l1)
+  // this spinner should only show up, when user navigates here
+  // on launch the splash screen is used for loading
+  if (l1 && !splashScreenVisible)
     return (
       <View className="justify-center items-center h-full">
         <Loader />

app/_layout.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { SplashScreenProvider, useSplashScreenLoading } from "@/providers/SplashScreenProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
@@ -33,7 +34,6 @@ import * as Linking from "expo-linking";
 import * as Notifications from "expo-notifications";
 import { router, Stack } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
-import * as SplashScreen from "expo-splash-screen";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
@@ -46,8 +46,6 @@ import { getLocales } from "expo-localization";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
 
-SplashScreen.preventAutoHideAsync();
-
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
     shouldShowAlert: true,
@@ -213,27 +211,15 @@ const checkAndRequestPermissions = async () => {
 };
 
 export default function RootLayout() {
-  const [loaded] = useFonts({
-    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
-  });
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
   Appearance.setColorScheme("dark");
 
-  if (!loaded) {
-    return null;
-  }
-
   return (
     <JotaiProvider>
-      <I18nextProvider i18n={i18n}>
-        <Layout />
-      </I18nextProvider>
+      <SplashScreenProvider>
+        <I18nextProvider i18n={i18n}>
+          <Layout />
+        </I18nextProvider>
+      </SplashScreenProvider>
     </JotaiProvider>
   );
 }
@@ -319,6 +305,17 @@ function Layout() {
     const { hostname, path, queryParams } = Linking.parse(url);
   }
 
+  const [loaded] = useFonts({
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
+  });
+
+  // show splash screen until everything loaded
+  useSplashScreenLoading(!loaded)
+
+  if (!loaded) {
+    return null;
+  }
+
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
       <QueryClientProvider client={queryClient}>