From b8fd85fe1544221905930bdd85981a497bb2c7c7 Mon Sep 17 00:00:00 2001
From: Lukas Hass <lukas@slucky.de>
Date: Tue, 1 Mar 2022 18:23:01 +0100
Subject: [PATCH] lazy load TextGlobalMessage component

---
 front/src/Components/Menu/Menu.svelte         | 13 +++--
 .../Components/Menu/TextGlobalMessage.svelte  | 53 +++++++++++++++++--
 .../style/TextGlobalMessageSvelte-Style.scss  | 45 ----------------
 front/style/index.scss                        |  1 -
 4 files changed, 54 insertions(+), 58 deletions(-)
 delete mode 100644 front/style/TextGlobalMessageSvelte-Style.scss

diff --git a/front/src/Components/Menu/Menu.svelte b/front/src/Components/Menu/Menu.svelte
index 21e62520..2583c208 100644
--- a/front/src/Components/Menu/Menu.svelte
+++ b/front/src/Components/Menu/Menu.svelte
@@ -3,7 +3,6 @@
     import SettingsSubMenu from "./SettingsSubMenu.svelte";
     import ProfileSubMenu from "./ProfileSubMenu.svelte";
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
-    import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
     import CustomSubMenu from "./CustomSubMenu.svelte";
     import GuestSubMenu from "./GuestSubMenu.svelte";
@@ -25,16 +24,16 @@
     let props: { url: string; allowApi: boolean };
     let unsubscriberSubMenuStore: Unsubscriber;
 
-    onMount(() => {
+    onMount(async () => {
         unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
             if (!$subMenusStore.includes(activeSubMenu)) {
-                switchMenu($subMenusStore[0]);
+                void switchMenu($subMenusStore[0]);
             }
         });
 
         checkSubMenuToShow();
 
-        switchMenu($subMenusStore[0]);
+        await switchMenu($subMenusStore[0]);
     });
 
     onDestroy(() => {
@@ -43,7 +42,7 @@
         }
     });
 
-    function switchMenu(menu: MenuItem) {
+    async function switchMenu(menu: MenuItem) {
         if (menu.type === "translated") {
             activeSubMenu = menu;
             switch (menu.key) {
@@ -60,7 +59,7 @@
                     activeComponent = AboutRoomSubMenu;
                     break;
                 case SubMenusInterface.globalMessages:
-                    activeComponent = GlobalMessageSubMenu;
+                    activeComponent = (await import("./GlobalMessagesSubMenu.svelte")).default;
                     break;
                 case SubMenusInterface.contact:
                     activeComponent = ContactSubMenu;
@@ -111,7 +110,7 @@
                 <button
                     type="button"
                     class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}"
-                    on:click|preventDefault={() => switchMenu(submenu)}
+                    on:click|preventDefault={() => void switchMenu(submenu)}
                 >
                     {translateMenuName(submenu)}
                 </button>
diff --git a/front/src/Components/Menu/TextGlobalMessage.svelte b/front/src/Components/Menu/TextGlobalMessage.svelte
index 6b42e42e..73e606dc 100644
--- a/front/src/Components/Menu/TextGlobalMessage.svelte
+++ b/front/src/Components/Menu/TextGlobalMessage.svelte
@@ -3,7 +3,7 @@
     import { onDestroy, onMount } from "svelte";
     import { gameManager } from "../../Phaser/Game/GameManager";
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
-    import type { Quill } from "quill";
+    import Quill from "quill";
     import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
     import LL from "../../i18n/i18n-svelte";
 
@@ -54,10 +54,7 @@
     };
 
     //Quill
-    onMount(async () => {
-        // Import quill
-        const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
-
+    onMount(() => {
         quill = new Quill(QUILL_EDITOR, {
             placeholder: $LL.menu.globalMessage.enter(),
             theme: "snow",
@@ -76,3 +73,49 @@
 <section class="section-input-send-text">
     <div class="input-send-text" bind:this={QUILL_EDITOR} />
 </section>
+
+<style lang="scss">
+    @import "../../../style/breakpoints.scss";
+    @import "quill/dist/quill.snow.css";
+
+    section.section-input-send-text {
+        --height-toolbar: 20%;
+        height: 100%;
+
+        :global(.ql-toolbar) {
+            max-height: var(--height-toolbar);
+            background: whitesmoke;
+        }
+
+        div.input-send-text {
+            height: calc(100% - var(--height-toolbar));
+            overflow: auto;
+
+            color: whitesmoke;
+            font-size: 1rem;
+
+            :global(.ql-editor.ql-blank::before) {
+                color: whitesmoke;
+                font-size: 1rem;
+            }
+
+            :global(.ql-tooltip) {
+                top: 40% !important;
+                left: 20% !important;
+
+                color: whitesmoke;
+                background-color: #333333;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        section.section-input-send-text {
+            --height-toolbar: 30%;
+
+            :global(.ql-toolbar) {
+                overflow: auto;
+            }
+        }
+    }
+</style>
diff --git a/front/style/TextGlobalMessageSvelte-Style.scss b/front/style/TextGlobalMessageSvelte-Style.scss
deleted file mode 100644
index 94baa67a..00000000
--- a/front/style/TextGlobalMessageSvelte-Style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-//TextGlobalMessage
-
-// TODO: load on demand with TextGlobalMessage component
-@import "quill/dist/quill.snow.css";
-
-section.section-input-send-text {
-  --height-toolbar: 20%;
-  height: 100%;
-
-  .ql-toolbar{
-    max-height: var(--height-toolbar);
-    background: whitesmoke;
-  }
-
-  div.input-send-text{
-    height: calc(100% - var(--height-toolbar));
-    overflow: auto;
-
-    color: whitesmoke;
-    font-size: 1rem;
-
-    .ql-editor.ql-blank::before {
-      color: whitesmoke;
-      font-size: 1rem;
-    }
-
-    .ql-tooltip {
-      top: 40% !important;
-      left: 20% !important;
-
-      color: whitesmoke;
-      background-color: #333333;
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  section.section-input-send-text {
-    --height-toolbar: 30%;
-
-    .ql-toolbar {
-      overflow: auto;
-    }
-  }
-}
diff --git a/front/style/index.scss b/front/style/index.scss
index 21690c98..cf0f365a 100644
--- a/front/style/index.scss
+++ b/front/style/index.scss
@@ -3,4 +3,3 @@
 @import "cowebsite.scss";
 @import "fonts.scss";
 @import "style";
-@import "TextGlobalMessageSvelte-Style";