Dynamically import exceljs

src/functions/export.js

@@ -1,4 +1,3 @@
-import { Workbook } from 'exceljs';
 import dayjs from 'dayjs';
 
 import { banners } from '../data/banners';
@@ -7,6 +6,8 @@ import { bannersDual } from '../data/bannersDual';
 import { getTimeOffset } from '../stores/server';
 import { process } from './wish';
 
+let Workbook;
+
 const bannerCategories = {
   'character-event': 'Character Event',
   'weapon-event': 'Weapon Event',
@@ -14,7 +15,9 @@ const bannerCategories = {
   beginners: "Beginners' Wish",
 };
 
-function createWorkbook() {
+async function createWorkbook() {
+  Workbook = (await import('exceljs')).Workbook;
+
   const workbook = new Workbook();
   workbook.creator = 'Paimon.moe';
   workbook.created = new Date();
@@ -223,7 +226,7 @@ async function downloadFile(workbook) {
 }
 
 export async function exportToExcel() {
-  const workbook = createWorkbook();
+  const workbook = await createWorkbook();
 
   addSheet(workbook);
   await addBanners(workbook);

src/routes/wish/_settingModal.svelte

@@ -8,16 +8,16 @@
 
   import { exportToExcel } from '../../functions/export';
   import { pushToast } from '../../stores/toast';
-  import ExcelImportModal from './_excelImport.svelte';
   import { getContext } from 'svelte';
 
-  const { open: openModal, close: closeModal } = getContext('simple-modal');
+  const { open: openModal } = getContext('simple-modal');
 
   export let setManualInput;
   export let settings;
   export let closeImportModal;
 
   let loadingExport = false;
+  let loadingImport = false;
 
   let enableManual = settings.manualInput;
 
@@ -32,9 +32,13 @@
     pushToast($t('wish.help.exportFinish'));
   }
 
-  function openImporter() {
+  async function openImporter() {
+    loadingImport = true;
+    const modal = await import('./_excelImport.svelte');
+    loadingImport = false;
+
     openModal(
-      ExcelImportModal,
+      modal.default,
       {
         closeModal: closeImportModal,
       },
@@ -52,13 +56,18 @@
   <h1 class="font-display text-white text-xl mb-2">{$t('wish.help.exportTitle')}</h1>
   <div class="text-white p-2 bg-background rounded-xl">
     <p class="mb-2">{$t('wish.help.exportMessage')}</p>
-    <Button className="mr-2" disabled={loadingExport} on:click={exportFile}>
+    <Button className="mr-2" disabled={loadingExport || loadingImport} on:click={exportFile}>
       {#if loadingExport}
         <Icon path={mdiLoading} spin size={0.8} className="mr-2" />
       {/if}
       {$t(loadingExport ? 'wish.help.exporting' : 'wish.help.export')}
     </Button>
-    <Button disabled={loadingExport} on:click={openImporter}>{$t('wish.help.import')}</Button>
+    <Button disabled={loadingExport || loadingImport} on:click={openImporter}>
+      {#if loadingImport}
+        <Icon path={mdiLoading} spin size={0.8} className="mr-2" />
+      {/if}
+      {$t('wish.help.import')}
+    </Button>
   </div>
   <h1 class="font-display text-white text-xl mt-8 mb-2">{$t('wish.help.manualTitle')}</h1>
   <div class="text-white p-2 bg-background rounded-xl">