Merge pull request #7399 from LibreSign/fix/7321-lazy-load-files-sidebar-tab

fix: lazy load files sidebar tab

Author: vitormattos

src/tab.ts

@@ -4,16 +4,14 @@
  */
 
 import { createPinia } from 'pinia'
-import { createApp } from 'vue'
+import { createApp, type App as VueApp } from 'vue'
 
 import { loadState } from '@nextcloud/initial-state'
 import { t, n } from '@nextcloud/l10n'
 import { FileType, registerSidebarTab } from '@nextcloud/files'
 
 import LibreSignLogoDarkSvg from '../img/app-dark.svg?raw'
 
-import AppFilesTab from './components/RightSidebar/AppFilesTab.vue'
-
 import './style/icons.scss'
 
 if (!window.OCA.Libresign) {
@@ -79,11 +77,13 @@ function mapNodeToFileInfo(node: SidebarNode = {}): FileInfo {
 interface LibreSignSidebarTabElement extends HTMLElement {
 	_node?: SidebarNode
 	_active?: boolean
+	_vueApp?: VueApp<Element> | null
 	_vueInstance?: TabComponentInstance | null
+	_mountPromise?: Promise<void> | null
 	node?: SidebarNode
 	update(fileInfo: FileInfo): void
 	setActive(active: boolean): Promise<void>
-	mountVue(): void
+	mountVue(): Promise<void>
 	destroyVue(): void
 	updateFromNode(): void
 }
@@ -98,11 +98,12 @@ function setupCustomElement() {
 	class LibreSignSidebarTab extends HTMLElement implements LibreSignSidebarTabElement {
 		_node?: SidebarNode
 		_active?: boolean
+		_vueApp?: VueApp<Element> | null
 		_vueInstance?: TabComponentInstance | null
+		_mountPromise?: Promise<void> | null
 
 		connectedCallback() {
-			this.mountVue()
-			this.updateFromNode()
+			void this.mountVue()
 		}
 
 		disconnectedCallback() {
@@ -132,35 +133,45 @@ function setupCustomElement() {
 			}
 		}
 
-		mountVue() {
-			if (this._vueInstance) {
-				return
+		async mountVue() {
+			if (this._vueInstance || this._mountPromise) {
+				return this._mountPromise ?? Promise.resolve()
 			}
 
-			const app = createApp(AppFilesTab)
-			app.config.globalProperties.t = t
-			app.config.globalProperties.n = n
-			app.use(pinia)
+			this._mountPromise = (async () => {
+				const { default: AppFilesTab } = await import('./components/RightSidebar/AppFilesTab.vue')
+				if (!this.isConnected || this._vueInstance) {
+					return
+				}
+
+				const app = createApp(AppFilesTab)
+				app.config.globalProperties.t = t
+				app.config.globalProperties.n = n
+				app.use(pinia)
+
+				const element = document.createElement('div')
+				this._vueApp = app
+				this._vueInstance = app.mount(element)
+				this.appendChild(element)
+				this.updateFromNode()
+			})().finally(() => {
+				this._mountPromise = null
+			})
 
-			const element = document.createElement('div')
-			this._vueInstance = app.mount(element)
-			this.appendChild(element)
+			return this._mountPromise
 		}
 
 		destroyVue() {
-			if (this._vueInstance && this._vueInstance.$el) {
-				// For Vue 3, we need to unmount the app
-				// The best way would be to track the app instance
-				this._vueInstance = null
-			}
+			this._vueApp?.unmount()
+			this._vueApp = null
+			this._vueInstance = null
 		}
 
 		updateFromNode() {
 			if (!this._vueInstance || !this._node) {
 				return
 			}
 			const fileInfo = mapNodeToFileInfo(this._node)
-			// Call update on the mounted component if it exists
 			if (typeof this._vueInstance.update === 'function') {
 				this._vueInstance.update(fileInfo)
 			}

src/tests/tab.spec.ts

@@ -0,0 +1,129 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockLoadState = vi.fn(() => true)
+const mockRegisterSidebarTab = vi.fn()
+const mockCreatePinia = vi.fn(() => ({ _id: 'pinia' }))
+
+const mockMountedInstance = {
+	update: vi.fn(),
+}
+
+const mockVueApp = {
+	config: { globalProperties: {} as Record<string, unknown> },
+	use: vi.fn().mockReturnThis(),
+	mount: vi.fn(() => mockMountedInstance),
+	unmount: vi.fn(),
+}
+
+const mockCreateApp = vi.fn(() => mockVueApp)
+const appFilesTabModuleLoaded = vi.fn(() => ({
+	default: { name: 'AppFilesTabStub', template: '<div />' },
+}))
+
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState: mockLoadState,
+}))
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: (_app: string, text: string) => text,
+	n: (_app: string, singular: string, _plural: string, _count: number) => singular,
+}))
+
+vi.mock('@nextcloud/files', () => ({
+	FileType: { Folder: 'dir' },
+	registerSidebarTab: mockRegisterSidebarTab,
+}))
+
+vi.mock('pinia', () => ({
+	createPinia: mockCreatePinia,
+}))
+
+vi.mock('vue', () => ({
+	createApp: mockCreateApp,
+}))
+
+vi.mock('../components/RightSidebar/AppFilesTab.vue', () => appFilesTabModuleLoaded())
+vi.mock('../../img/app-dark.svg?raw', () => ({ default: '<svg />' }))
+vi.mock('../style/icons.scss', () => ({}))
+
+beforeAll(async () => {
+	await import('../tab')
+})
+
+beforeEach(() => {
+	vi.clearAllMocks()
+	window.OCA = window.OCA ?? {}
+	window.OCA.Libresign = {}
+})
+
+describe('tab.ts', () => {
+	it('registers LibreSign sidebar tab on DOMContentLoaded', () => {
+		window.dispatchEvent(new Event('DOMContentLoaded'))
+
+		expect(mockRegisterSidebarTab).toHaveBeenCalledOnce()
+		const tabConfig = mockRegisterSidebarTab.mock.calls[0][0] as { id: string; tagName: string }
+		expect(tabConfig.id).toBe('libresign')
+		expect(tabConfig.tagName).toBe('libresign-files-sidebar-tab')
+	})
+
+	it('enabled() returns false when certificate is not configured', () => {
+		mockLoadState.mockReturnValue(false)
+		window.dispatchEvent(new Event('DOMContentLoaded'))
+		const tabConfig = mockRegisterSidebarTab.mock.calls[0][0] as {
+			enabled: (context: { node: Record<string, unknown> }) => boolean
+		}
+
+		expect(tabConfig.enabled({ node: { type: 'file', mimetype: 'application/pdf' } })).toBe(false)
+	})
+
+	it('enabled() accepts signed folders and maps file info into OCA.Libresign', () => {
+		mockLoadState.mockReturnValue(true)
+		window.dispatchEvent(new Event('DOMContentLoaded'))
+		const tabConfig = mockRegisterSidebarTab.mock.calls[0][0] as {
+			enabled: (context: { node: Record<string, unknown> }) => boolean
+		}
+
+		const enabled = tabConfig.enabled({
+			node: {
+				fileid: 101,
+				basename: 'Signed',
+				dirname: '/Documents',
+				type: 'dir',
+				attributes: {
+					'libresign-signature-status': 'completed',
+				},
+			},
+		})
+
+		expect(enabled).toBe(true)
+		expect(window.OCA.Libresign.fileInfo).toMatchObject({
+			id: 101,
+			name: 'Signed',
+			path: '/Documents',
+		})
+	})
+
+	it('lazy mounts Vue only when custom element is connected and unmounts on disconnect', async () => {
+		window.dispatchEvent(new Event('DOMContentLoaded'))
+
+		const TabElement = window.customElements.get('libresign-files-sidebar-tab')
+		expect(TabElement).toBeDefined()
+		expect(mockCreateApp).not.toHaveBeenCalled()
+		expect(appFilesTabModuleLoaded).not.toHaveBeenCalled()
+
+		const element = document.createElement('libresign-files-sidebar-tab')
+		document.body.appendChild(element)
+
+		await vi.waitFor(() => expect(appFilesTabModuleLoaded).toHaveBeenCalledOnce())
+		expect(mockCreateApp).toHaveBeenCalledOnce()
+		expect(mockVueApp.mount).toHaveBeenCalledOnce()
+
+		element.remove()
+		expect(mockVueApp.unmount).toHaveBeenCalledOnce()
+	})
+})