diff --git a/src/plugins/built-in/assessmentsOverview/index.ts b/src/plugins/built-in/assessmentsOverview/index.ts index d1ce5f90..a2f3cb07 100644 --- a/src/plugins/built-in/assessmentsOverview/index.ts +++ b/src/plugins/built-in/assessmentsOverview/index.ts @@ -61,6 +61,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = { const gridItem = document.createElement("li"); gridItem.className = "item"; gridItem.classList.add(OVERVIEW_MENU_CLASS); + gridItem.dataset.betterseqta = "true"; const label = document.createElement("label"); label.textContent = "Overview"; gridItem.appendChild(label); @@ -79,9 +80,11 @@ const assessmentsOverviewPlugin: Plugin<{}> = { const clickHandler = (e: Event) => { e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); void loadGridView(); }; - gridItem.addEventListener("click", clickHandler); + gridItem.addEventListener("click", clickHandler, true); const popstateHandler = () => { if (isOverviewRoute()) { @@ -131,16 +134,16 @@ const assessmentsOverviewPlugin: Plugin<{}> = { if (requestId !== loadRequestId) return; - void renderSkeletonLoader(container); + renderSkeletonLoader(container); try { const data = await getAssessmentsData(); if (requestId !== loadRequestId) return; - void renderGrid(container, data); + renderGrid(container, data); } catch (err) { if (requestId !== loadRequestId) return; console.error("Failed to load assessments:", err); - void renderErrorState( + renderErrorState( container, err instanceof Error ? err.message : "Unknown error", ); @@ -151,7 +154,7 @@ const assessmentsOverviewPlugin: Plugin<{}> = { loadRequestId += 1; window.removeEventListener("popstate", popstateHandler); menuObserver.disconnect(); - gridItem.removeEventListener("click", clickHandler); + gridItem.removeEventListener("click", clickHandler, true); teardownOverviewUi(); gridItem.remove(); }; diff --git a/src/plugins/built-in/assessmentsOverview/ui.ts b/src/plugins/built-in/assessmentsOverview/ui.ts index 5d8bbe6c..c1d8484d 100644 --- a/src/plugins/built-in/assessmentsOverview/ui.ts +++ b/src/plugins/built-in/assessmentsOverview/ui.ts @@ -1,4 +1,8 @@ +import renderSvelte from "@/interface/main"; import { settingsState } from "@/seqta/utils/listeners/SettingsState"; +import AssessmentsOverview from "./AssessmentsOverview.svelte"; +import SkeletonLoader from "./SkeletonLoader.svelte"; +import ErrorState from "./ErrorState.svelte"; import { unmount } from "svelte"; let currentApp: any = null; @@ -115,42 +119,26 @@ function prepareContainer(container: HTMLElement) { watchOverviewTheme(container); } -async function mountOverviewComponent( - container: HTMLElement, - loader: () => Promise<{ default: any }>, - props: Record = {}, -) { - const [{ default: renderSvelte }, { default: Component }] = await Promise.all([ - import("@/interface/main"), - loader(), - ]); - currentApp = renderSvelte(Component, container, props); -} - -export async function renderGrid(container: HTMLElement, data: any) { +export function renderGrid(container: HTMLElement, data: any) { if (currentApp) unmount(currentApp); prepareContainer(container); - await mountOverviewComponent(container, () => import("./AssessmentsOverview.svelte"), { - data, - }); + currentApp = renderSvelte(AssessmentsOverview, container, { data }); } -export async function renderSkeletonLoader(container: HTMLElement) { +export function renderSkeletonLoader(container: HTMLElement) { if (currentApp) unmount(currentApp); prepareContainer(container); - await mountOverviewComponent(container, () => import("./SkeletonLoader.svelte")); + currentApp = renderSvelte(SkeletonLoader, container); } -export async function renderLoadingState(container: HTMLElement) { - await renderSkeletonLoader(container); +export function renderLoadingState(container: HTMLElement) { + renderSkeletonLoader(container); } -export async function renderErrorState(container: HTMLElement, error: string) { +export function renderErrorState(container: HTMLElement, error: string) { if (currentApp) unmount(currentApp); prepareContainer(container); - await mountOverviewComponent(container, () => import("./ErrorState.svelte"), { - error, - }); + currentApp = renderSvelte(ErrorState, container, { error }); } export function teardownOverviewUi() {