diff --git a/apps/client/src/index.html b/apps/client/src/index.html
index 0a3e9dc0e..79eee73a3 100644
--- a/apps/client/src/index.html
+++ b/apps/client/src/index.html
@@ -13,11 +13,6 @@
-
-
diff --git a/apps/client/src/index.ts b/apps/client/src/index.ts
index df5c6a853..588ebe361 100644
--- a/apps/client/src/index.ts
+++ b/apps/client/src/index.ts
@@ -1,9 +1,6 @@
-import $ from "jquery";
-
async function bootstrap() {
- (window as any).$ = $;
- (window as any).jQuery = $;
-
+ showSplash();
+ await initJQuery();
await setupGlob();
await loadBootstrapCss();
loadStylesheets();
@@ -13,6 +10,12 @@ async function bootstrap() {
hideSplash();
}
+async function initJQuery() {
+ const $ = (await import("jquery")).default;
+ (window as any).$ = $;
+ (window as any).jQuery = $;
+}
+
async function setupGlob() {
const response = await fetch(`/bootstrap${window.location.search}`);
const json = await response.json();
@@ -93,8 +96,13 @@ async function loadScripts() {
}
}
+function showSplash() {
+ // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide