Load custom elements lazily

assets/css/app.css

@@ -239,6 +239,31 @@ chat-widget {
     background-color: rgba(255, 255, 255, .3);
 }
 
+:not(:defined):not(notification-list) {
+    display: inline-block;
+    min-height: 1px;
+}
+
+.progress {
+    top: 0;
+    left: 0;
+    position: fixed;
+    height: 3px;
+    width: 0;
+    background-color: #0078ff;
+    animation: progress 10s infinite;
+}
+
+.progress--finish {
+    width: 100%;
+    transition: opacity .25s ease .2s;
+    opacity: 0;
+}
+
+@keyframes progress {
+    to { width: 100%; }
+}
+
 @media screen and (min-width: 960px) {
     .left {
         width: 25%;

assets/js/Common/EventSource.js

@@ -13,7 +13,10 @@ class EventSourceElement extends HTMLElement
             this._onDisconnect.push(() => window.removeEventListener(n, f));
         })('sse:addsubscription', this._onAddSubscription.bind(this));
 
-        this._connect();
+        ((n, f) => {
+            window.addEventListener(n, f);
+            this._onDisconnect.push(() => window.removeEventListener(n, f));
+        })('app:load', this._connect.bind(this));
     }
 
     disconnectedCallback()

assets/js/app.js

@@ -1,22 +1,21 @@
-/**
- * We don't use a bundler.
- * This is intentional because we use ECMAScript 6 modules and we want to keep the tooling small.
- */
-import './Chat/Widget.js'
-
-import './Common/EventSource.js'
-import { client } from './Common/HttpClient.js';
+import { client } from './Common/HttpClient.js'
 import './Common/NotificationList.js'
 
-import './ConnectFour/Game.js'
-import './ConnectFour/GameList.js'
-import './ConnectFour/AbortGameButton.js'
-import './ConnectFour/OpenGameButton.js'
-import './ConnectFour/ResignGameButton.js'
-import './ConnectFour/RunningGames.js'
+window.app = {
+    loadElements: node => Promise.allSettled([...node.querySelectorAll(':not(:defined)')]
+        .filter(n => !window.customElements.get(n.localName))
+        .map(n => import(n.localName))),
+    showProgress() {
+        document.querySelector('.progress')?.remove();
+        let progress = document.createElement('div');
+        progress.classList.add('progress');
+        const timeout = setTimeout(() => document.head.after(progress), 250);
+        return () => clearTimeout(timeout) || progress.classList.add('progress--finish');
+    }
+}
+
+client.onError = response => document.querySelector('notification-list').appendMessage(response.message);
 
-const notificationListElement = document.querySelector('notification-list');
+await window.app.loadElements(document.body).finally(window.app.showProgress());
 
-client.onError = (response) => {
-    notificationListElement.appendMessage(response.message);
-};
+window.dispatchEvent(new CustomEvent('app:load'));

config/chat/importmap.php

@@ -0,0 +1,7 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    'chat-widget' => ['path' => 'js/Chat/Widget.js']
+];

config/connect-four/importmap.php

@@ -0,0 +1,12 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    'running-games' => ['path' => 'js/ConnectFour/RunningGames.js'],
+    'connect-four-game-list' => ['path' => 'js/ConnectFour/GameList.js'],
+    'connect-four-game' => ['path' => 'js/ConnectFour/Game.js'],
+    'open-game-button' => ['path' => 'js/ConnectFour/OpenGameButton.js'],
+    'abort-game-button' => ['path' => 'js/ConnectFour/AbortGameButton.js'],
+    'resign-game-button' => ['path' => 'js/ConnectFour/ResignGameButton.js']
+];

config/importmap.php

@@ -16,7 +16,9 @@
         ->name('importmap.php');
 
     $map = [
-        'app' => ['path' => 'js/app.js', 'preload' => true]
+        'app' => ['path' => 'js/app.js', 'preload' => true],
+        'event-source' => ['path' => 'js/Common/EventSource.js', 'preload' => true],
+        'notification-list' => ['path' => 'js/Common/NotificationList.js', 'preload' => true]
     ];
 
     foreach ($finder as $file) {

docker-compose.ci.yml

@@ -112,7 +112,11 @@ services:
     #          CI helper         #
     ##############################
     selenium:
-        image: selenium/standalone-chrome:3.14
+        image: selenium/standalone-chrome:4.11
+        environment:
+            SE_NODE_MAX_SESSIONS: 20
+            SE_NODE_OVERRIDE_MAX_SESSIONS: 'true'
+        shm_size: '2gb'
     php:
         build:
             context: .

project

@@ -89,7 +89,7 @@ acceptance() {
 
     docker-compose -f docker-compose.ci.yml -p php-gaming-website-ci build --pull
     docker-compose -f docker-compose.ci.yml -p php-gaming-website-ci up -d
-    docker-compose -f docker-compose.ci.yml -p php-gaming-website-ci run php bash -c 'wait-for-tcp-server php-fpm:80 120 && vendor/bin/codecept run acceptance'
+    docker-compose -f docker-compose.ci.yml -p php-gaming-website-ci run php bash -c 'wait-for-tcp-server php-fpm:80,selenium:4444 120 && vendor/bin/codecept run acceptance'
     docker-compose -f docker-compose.ci.yml -p php-gaming-website-ci down -v
 }