routes.tsx

import { BasicLayout } from "@layout/basic.layout";
import { ProtectedLayout } from "@layout/protected.layout/protected.layout";
import DelayedRender, { SplashScreen } from "@utils/loading-fallback";
import { lazy, Suspense } from 'react';
import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom";

export const DEVICE_URL = '/device/';
export const LOGIN_URL = '/login';

// Lazy load components
const DeviceView = lazy(() => import('./components/devices/view/device.view'));
const LoginLayout = lazy(() => import('./components/login/layouts/login.layout'));

export const router = createBrowserRouter(
    createRoutesFromElements(
        <Route element={<BasicLayout />}>
            <Route
                path={LOGIN_URL}
                element={
                    <Suspense fallback={null}>
                        <DelayedRender>
                            <LoginLayout />
                        </DelayedRender>
                    </Suspense>
                }
            />
            <Route element={<ProtectedLayout />}>
                <Route
                    path={DEVICE_URL}
                    element={
                        <DelayedRender
                            loading={{
                                minimumLoadingTime: 1000,
                                component: SplashScreen
                            }}
                        >
                            <Suspense fallback={null}>
                                <DeviceView />
                            </Suspense>
                        </DelayedRender>
                    }
                />
                <Route
                    path="/"
                    element={<Navigate to={DEVICE_URL} replace={true} />}
                />
            </Route>
        </Route >
    )
);