I have a react page using MUI components with the following main app code:

// Theme and other components
import React, { useEffect, useState, lazy, Suspense, MouseEvent } from 'react';
import Box from "@mui/material/Box";
import { createTheme, ThemeProvider } from "@mui/material";
import ErrorBoundary from "./ErrorHandler/ErrorBoundary";
import Loader from "./Components/HelperComps/Loader";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// Header / Footer
import ResponsiveAppBar from "./Components/HeaderFooter/ResponsiveAppBar";
import Footer from "./Components/HeaderFooter/Footer";
import WaterEffect from "./Components/HelperComps/WaterEffect/WaterEffect";
import {BANANA_CURSOR, MUSIC_MOUSE} from "./Stuff/ImagePaths";

// Pages (lazy loading)
const Home = lazy(() => import("./Components/Pages/Home"));
const Live = lazy(() => import("./Components/Pages/Live"));
const Studio = lazy(() => import("./Components/Pages/Studio"));
const Aktuell = lazy(() => import("./Components/Pages/Zeit/Aktuell"));
const Vergangenheit = lazy(() => import("./Components/Pages/Zeit/Vergangenheit"));
const Zukunft = lazy(() => import("./Components/Pages/Zeit/Zukunft"));
const Genesis = lazy(() => import("./Components/Pages/Zeit/Genesis"));
const Kontakt = lazy(() => import("./Components/HeaderFooter/FooterSites/Kontakt"));
const Datenschutz = lazy(() => import("./Components/HeaderFooter/FooterSites/Datenschutz"));
const Impressum = lazy(() => import("./Components/HeaderFooter/FooterSites/Impressum"));
const ErrorPage = lazy(() => import("./ErrorHandler/ErrorPage"));

// create a theme instance
const theme = createTheme({
    components: {
        MuiAppBar: {
            styleOverrides: {
                root: {
                    height: '9vh',
                },
            },
        },
    },
});

interface MousePosition {
    x: number;
    y: number;
}

const App: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(true);
    const [mousePos, setMousePos] = useState<MousePosition>({ x: 0, y: 0 });

    useEffect(() => {
        const minLoadingTime = 1000; // 1 second minimum loading time
        const startTime = Date.now();

        const handleLoad = () => {
            const elapsedTime = Date.now() - startTime;
            const remainingTime = minLoadingTime - elapsedTime;

            if (remainingTime > 0) {
                setTimeout(() => {
                    setLoading(false);
                }, remainingTime);
            } else {
                setLoading(false);
            }
        };

        // Adding event listener for when the entire page has loaded
        window.addEventListener('load', handleLoad);

        // Cleanup event listener on component unmount
        return () => {
            window.removeEventListener('load', handleLoad);
        };
    }, []);

    const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {
        setMousePos({ x: event.clientX + window.scrollX, y: event.clientY + window.scrollY });
    };

    return (
        <ThemeProvider theme={theme}>
            <ErrorBoundary>
                <Router>
                    <Box
                        // onMouseMove={handleMouseMove}
                        sx={{
                            minHeight: '100 vh',
                            paddingBottom: '9vh',
                            paddingTop: '9vh',
                            position: 'relative',
                            overflow: 'hidden',
                            cursor: `url(${MUSIC_MOUSE}) 16 16, auto`,
                            /*'&::after': {
                                content: '""',
                                width: 100,
                                height: 100,
                                background: 'radial-gradient(circle, rgba(255, 255, 0, 1) 0%, rgba(255, 255, 0, 0.8) 25%, rgba(255, 255, 0, 0.4) 50%, rgba(255, 255, 0, 0.2) 75%, rgba(255, 255, 0, 0) 100%)',
                                borderRadius: '50%',
                                position: 'absolute',
                                top: mousePos.y,
                                left: mousePos.x,
                                pointerEvents: 'none', // Ensure the effect doesn't interfere with pointer events
                                transform: 'translate(-50%, -50%)', // Center the effect exactly at the cursor
                            },*/
                        }}
                    >
                        {loading && <Loader />}
                        {!loading && (
                            <>
                                <ResponsiveAppBar />
                                <Suspense fallback={<Loader />}>
                                    <Routes>
                                        <Route path="/" element={<Home />} />
                                        <Route path="/zeit/genesis" element={<Genesis />} />
                                        <Route path="/zeit/vergangenheit" element={<Vergangenheit />} />
                                        <Route path="/zeit/aktuell" element={<Aktuell />} />
                                        <Route path="/zeit/zukunft" element={<Zukunft />} />
                                        <Route path="/studio" element={<Studio />} />
                                        <Route path="/live" element={<Live />} />
                                        <Route path="/kontakt" element={<Kontakt />} />
                                        <Route path="/datenschutz" element={<Datenschutz />} />
                                        <Route path="/impressum" element={<Impressum />} />
                                        <Route path="*" element={<ErrorPage errorCode="Error Code: 418" errorMessage="I'm a Teapot; #(RFC 2324, RFC 7168)" />} />
                                    </Routes>
                                </Suspense>
                                <Footer />
                            </>
                        )}
                    </Box>
                </Router>
            </ErrorBoundary>
        </ThemeProvider>
    );
}

export default App;

My problem is, that the page is normally loaded on desktop butt on the mobile (smartphone tested) there is only the loader / Loading page showing up and no home.
I’ve tried with using a empty hello wolrd “home” page, to test. butt this did non function either.

Somebody a hint? Is there a real error in the code?

kind regards

shortly before, i tried to embed a own font in my page. i deleted this to test. and the stuff with the hello world page.