reworked to only load pages if needed

flightscore/src/app-root.ts

@@ -1,27 +1,22 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
+import { Router } from './router/router';
 import './pages/not-found-page';
 import './components/nav-bar';
 import './components/cc/cc-nav-bar';
 import './components/footer-bar';
-import { Router } from './router/router';
-import './pages/home-page';
-import './pages/competition-page';
-import './pages/auth/login-page';
-import './pages/auth/register-page';
-import './pages/cc/cc-home-page';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
   private router!: Router;
 
-    @state() private isCompetitionCenter = false;
+  @state() private isCompetitionCenter = false;
 
   static styles = css`
     :host {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
   }
   nav-bar {
       flex: 0 0 auto;
@@ -41,11 +36,36 @@ export class AppRoot extends LitElement {
   firstUpdated() {
     const outlet = this.shadowRoot?.getElementById('outlet') as HTMLElement;
     this.router = new Router(outlet, [
-      { path: '/', view: () => document.createElement('home-page') },
-      { path: '/competitions', view: () => document.createElement('competition-page') },
-      { path: '/login', view: () => document.createElement('login-page') },
-      { path: '/register', view: () => document.createElement('register-page') },
-      { path: '/cc/', view: () => document.createElement('cc-home-page') },
+      {
+        path: '/', view: async () => {
+          await import('./pages/home-page.js');
+          return document.createElement('home-page');
+        }
+      },
+      {
+        path: '/competitions', view: async () => {
+          await import('./pages/competition-page.js');
+          return document.createElement('competition-page');
+        }
+      },
+      {
+        path: '/login', view: async () => {
+          await import('./pages/auth/login-page.js');
+          return document.createElement('login-page')
+        }
+      },
+      {
+        path: '/register', view: async () => {
+          await import('./pages/auth/register-page.js');
+          return document.createElement('register-page');
+        }
+      },
+      {
+        path: '/cc/', view: async () => {
+          await import('./pages/cc/cc-home-page.js');
+          return document.createElement('cc-home-page');
+        }
+      },
     ]);
 
     this.router.onRouteChange = (path: string) => {

flightscore/src/router/router.ts

@@ -1,7 +1,7 @@
 
 export type Route = {
   path: string;
-  view: () => HTMLElement;
+  view: () => Promise<HTMLElement> | HTMLElement;
 };
 
 export class Router {
@@ -20,13 +20,17 @@ export class Router {
     this.resolve();
   }
 
-  resolve() {
+  async resolve() {
     const path = window.location.pathname;
     const match = this.routes.find((r) => r.path === path);
     this.outlet.innerHTML = '';
-    this.outlet.append(
-      match ? match.view() : document.createElement('not-found-page')
-    );
+
+    if (match) {
+      const view = await match.view();
+      this.outlet.append(view);
+    } else {
+      this.outlet.append(document.createElement('not-found-page'));
+    }
 
     if (this.onRouteChange) {
       this.onRouteChange(path);