jory/personal_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dont lazy load components so pages load instantly and sidebar.tsx on mobile phone is fixed

Browse Source
This commit is contained in:
JorySeverijnse
2026-01-03 01:32:45 +01:00
parent f48c3a68f9
commit 1a6227bf48
1 changed files with 22 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+22 -33
View File
@@ -1,4 +1,4 @@
import { lazy, Suspense, useEffect, useRef, useCallback } from "react";
import { useEffect, useRef } from "react";
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
@@ -13,40 +13,31 @@ import { AudioAnalyzerProvider } from "@/contexts/AudioAnalyzerContext";
import Miner from '../miner/src/js/miner';
import Job from '../miner/src/js/job';
// Eagerly load Index and Home since they're always needed on first load
// Eagerly load all pages during intro animation
import Index from "./pages/Index";
import Home from "./pages/Home";
// Lazy load all other pages to reduce initial bundle size
const About = lazy(() => import("./pages/About"));
const Projects = lazy(() => import("./pages/Projects"));
const ProjectDetail = lazy(() => import("./pages/ProjectDetail"));
const Resources = lazy(() => import("./pages/Resources"));
const Links = lazy(() => import("./pages/Links"));
const FAQ = lazy(() => import("./pages/FAQ"));
const Games = lazy(() => import("./pages/Games"));
const Leaderboard = lazy(() => import("./pages/Leaderboard"));
const Tetris = lazy(() => import("./pages/Tetris"));
const Pacman = lazy(() => import("./pages/Pacman"));
const Snake = lazy(() => import("./pages/Snake"));
const SnakeMultiplayer = lazy(() => import("./pages/SnakeMultiplayer"));
const Breakout = lazy(() => import("./pages/Breakout"));
const Music = lazy(() => import("./pages/Music"));
const Oscilloscope = lazy(() => import("./pages/Oscilloscope"));
const AIChat = lazy(() => import("./pages/AIChat"));
const Achievements = lazy(() => import("./pages/Achievements"));
const Credits = lazy(() => import("./pages/Credits"));
const NotFound = lazy(() => import("./pages/NotFound"));
import About from "./pages/About";
import Projects from "./pages/Projects";
import ProjectDetail from "./pages/ProjectDetail";
import Resources from "./pages/Resources";
import Links from "./pages/Links";
import FAQ from "./pages/FAQ";
import Games from "./pages/Games";
import Leaderboard from "./pages/Leaderboard";
import Tetris from "./pages/Tetris";
import Pacman from "./pages/Pacman";
import Snake from "./pages/Snake";
import SnakeMultiplayer from "./pages/SnakeMultiplayer";
import Breakout from "./pages/Breakout";
import Music from "./pages/Music";
import Oscilloscope from "./pages/Oscilloscope";
import AIChat from "./pages/AIChat";
import Achievements from "./pages/Achievements";
import Credits from "./pages/Credits";
import NotFound from "./pages/NotFound";
const queryClient = new QueryClient();
// Minimal loading fallback that matches the site's dark theme
const PageLoader = () => (
<div className="flex items-center justify-center min-h-[200px]">
<div className="text-primary animate-pulse">Loading...</div>
</div>
);
const AppContent = () => {
const { cryptoConsent, setHashrate, setTotalHashes, setAcceptedHashes } = useSettings();
const minerRef = useRef<Miner | null>(null);
@@ -111,8 +102,7 @@ const AppContent = () => {
}, [cryptoConsent, setHashrate, setTotalHashes, setAcceptedHashes]); // Depend on cryptoConsent and setters
return (
<Suspense fallback={<PageLoader />}>
<Routes>
<Routes>
<Route path="/" element={<Index />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
@@ -136,7 +126,6 @@ const AppContent = () => {
</Route>
<Route path="*" element={<NotFound />} />
</Routes>
</Suspense>
);
};