Merge branch 'dev' of https://github.com/scan-go/mobile-ionic into dev

src/App.tsx

@@ -22,6 +22,7 @@ import { Suspense, useEffect } from "react";
 import AppLoading from "./components/App/AppLoading";
 import AppUrlListener from "./components/App/AppUrlListener";
 import { useAppTheme } from "./hooks/app/useAppTheme";
+import { useIsNative } from "./hooks/app/useIsNative";
 import { useSplashScreen } from "./hooks/app/useSplashScreen";
 import AppRoutes from "./routes/routes";
 import { useAuthStore } from "./stores/auth.store";
@@ -30,23 +31,24 @@ import "./theme/variables.scss";
 setupIonicReact();
 
 export default function App() {
-  const isInitialized = useAuthStore((state) => state.isInitialized);
   const listenToAuthClient = useAuthStore((state) => state.listenToAuthClient);
-
+  const { isNative } = useIsNative(false);
   useAppTheme();
-  useSplashScreen();
+  const { showLoading, hideLoading } = useSplashScreen();
+
   useEffect(() => {
     const listener = listenToAuthClient();
 
+    if (!isNative) {
+      showLoading("Värmer upp...");
+    }
+
     return () => {
+      hideLoading();
       listener.data.subscription.unsubscribe();
     };
   }, []);
 
-  if (!isInitialized) {
-    return <AppLoading message="Starting App..." />;
-  }
-
   return (
     <IonApp>
       <Suspense fallback={<AppLoading message="Loading route..." />}>

src/hooks/app/useSplashScreen.ts

@@ -1,13 +1,21 @@
 import { useAuthStore } from "@/stores/auth.store";
 import { SplashScreen } from "@capacitor/splash-screen";
+import { useIonLoading } from "@ionic/react";
 import { useEffect } from "react";
 
 export function useSplashScreen() {
   const isInitialized = useAuthStore((state) => state.isInitialized);
+  const [showLoading, hideLoading] = useIonLoading();
 
   useEffect(() => {
     if (isInitialized) {
       SplashScreen.hide();
+      hideLoading();
     }
   }, [isInitialized]);
+
+  return {
+    showLoading,
+    hideLoading,
+  };
 }

src/main.tsx

@@ -7,14 +7,15 @@ import Providers from "./Providers";
 
 const container = document.getElementById("root");
 const root = createRoot(container!);
-SplashScreen.show();
 
-defineCustomElements(window);
+SplashScreen.show().then(() => {
+  defineCustomElements(window);
 
-root.render(
-  <React.StrictMode>
-    <Providers>
-      <App />
-    </Providers>
-  </React.StrictMode>
-);
+  root.render(
+    <React.StrictMode>
+      <Providers>
+        <App />
+      </Providers>
+    </React.StrictMode>
+  );
+});