improve code splitting

the problem page is still large b/c of the dependency on the editor, but at least the home pages should load quickly

src/App.tsx

@@ -1,11 +1,8 @@
-import React from 'react';
+import React, {lazy} from 'react';
 import {BrowserRouter as Router, Link, Route, Routes, useLocation} from 'react-router-dom';
 import './App.css';
 import 'highlight.js/styles/atom-one-dark.min.css';
-import {Problem} from "./problem/Problem";
-import Home from './Home';
 import LoginButton from "./auth/LoginButton";
-import LoginSuccess from "./auth/LoginSuccess";
 import {createTheme, Shadows} from "@mui/material";
 
 export const API_URL = "https://codehelp.api.dacubeking.com/";
@@ -69,6 +66,11 @@ export function Header() {
     }
 }
 
+const Home = lazy(() => import("./Home"));
+const Problem = lazy(() => import("./problem/Problem"));
+const LoginSuccess = lazy(() => import("./auth/LoginSuccess"));
+
+
 function App() {
     return (
         <Router>

src/problem/Problem.tsx

@@ -44,7 +44,7 @@ function getStorageKey(id: string, userName: string | undefined) {
     return "problem " + id;
 }
 
-export function Problem() {
+export default function Problem() {
     const [problemData, setProblemData] = useState(null as unknown as ProblemData);
     const {"*": id} = useParams();
     const [userData, setUserData] = useState(null as unknown as UserData);