Fix Loading issues

tranga-website/src/App.tsx

@@ -2,12 +2,13 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Components/Settings/Settings.tsx";
 import Header from "./Header.tsx";
-import {createContext, useEffect, useState} from "react";
+import {createContext, ReactNode, useEffect, useState} from "react";
 import {V2} from "./apiClient/V2.ts";
 import { ApiContext } from './apiClient/ApiContext.tsx';
 import MangaList from "./Components/Mangas/MangaList.tsx";
 import {FileLibrary, Manga, MangaConnector} from "./apiClient/data-contracts.ts";
 import Search from "./Components/Search.tsx";
+import {Typography} from "@mui/joy";
 
 export const MangaConnectorContext = createContext<MangaConnector[]>([]);
 export const MangaContext = createContext<Manga[]>([]);
@@ -16,7 +17,9 @@ export const FileLibraryContext = createContext<FileLibrary[]>([]);
 export default function App () {
     const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/")) + "/api";
     const [apiUri, setApiUri] = useState<string>(apiUriStr);
-    const [Api, setApi] = useState<V2>(new V2());
+    const [Api, setApi] = useState<V2>(new V2({
+        baseUrl: apiUri
+    }));
 
     const [mangaConnectors, setMangaConnectors] = useState<MangaConnector[]>([]);
     const [manga, setManga] = useState<Manga[]>([]);
@@ -44,11 +47,12 @@ export default function App () {
                     setManga(response.data);
             })
         })
-    }, [Api]);
+    }, []);
     
     
     useEffect(() => {
         localStorage.setItem("apiUri", apiUri);
+        if (Api.baseUrl != apiUri)
             setApi(new V2({
                 baseUrl: apiUri
             }));
@@ -59,6 +63,8 @@ export default function App () {
             <FileLibraryContext value={fileLibraries}>
                 <MangaConnectorContext.Provider value={mangaConnectors}>
                     <MangaContext.Provider value={manga}>
+                        {
+                            Api ?
                                 <Sheet className={"app"}>
                                     <Header>
                                         <Settings setApiUri={setApiUri} />
@@ -69,9 +75,17 @@ export default function App () {
                                         </MangaList>
                                     </Sheet>
                                 </Sheet>
+                                : <Loading />
+                        }
                     </MangaContext.Provider>
                 </MangaConnectorContext.Provider>
             </FileLibraryContext>
         </ApiContext.Provider>
     );
 }
+
+function Loading () : ReactNode{
+    return (
+        <Typography>Loading</Typography>
+    );
+}