Skip to content

feat: lazy initialization for editor setup #2212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
enjeck wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: lazy initialization for editor setup #2212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion lib/Controller/PageController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ public function index(): TemplateResponse {
Util::addStyle(Application::APP_ID, 'grid');
Util::addStyle(Application::APP_ID, 'modal');
Util::addStyle(Application::APP_ID, 'tiptap');
Util::addStyle(Application::APP_ID, 'tables-style');
Copy link
Contributor Author

@enjeck enjeck Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unrelated to this feature, just removing since not needed


if (class_exists(LoadViewer::class)) {
$this->eventDispatcher->dispatchTyped(new LoadViewer());
Expand Down
49 changes: 46 additions & 3 deletions src/shared/components/ncEditor/NcEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@
textAppAvailable: !!window.OCA?.Text?.createEditor,
editor: null,
localValue: '',
observer: null,
initialized: false,
idleHandle: null,
}
},

Expand Down Expand Up @@ -96,16 +99,56 @@

async mounted() {
this.localValue = this.text
await this.setupEditor()
this.editor?.setContent(this.localValue, false)
// Lazy initialize the editor:
// 1) When the component becomes visible (IntersectionObserver)
// 2) Or when the browser is idle (requestIdleCallback fallback)
this.setupLazyInitialization()
},

beforeDestroy() {
this?.editor?.destroy()
this?.observer?.disconnect?.()
if (this.idleHandle && typeof cancelIdleCallback === 'function') {
cancelIdleCallback(this.idleHandle)
}
this?.editor?.destroy?.()
},

methods: {
t,
setupLazyInitialization() {
if (this.initialized) return

// Prefer initializing when the editor wrapper enters the viewport
if ('IntersectionObserver' in window) {
this.observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting && !this.initialized) {
this.initialized = true
this.setupEditor().then(() => {
this.editor?.setContent(this.localValue, false)
})
this.observer?.disconnect?.()
break
}
}
}, { rootMargin: '200px' })
this.$nextTick(() => {
const el = this.$el
if (el) this.observer.observe(el)
})
} else {
// Fallback: schedule during idle time to avoid blocking
const idle = window.requestIdleCallback || ((cb) => setTimeout(() => cb({ timeRemaining: () => 0 }), 50))

Check failure on line 141 in src/shared/components/ncEditor/NcEditor.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

Unexpected literal in error position of callback
const cancel = window.cancelIdleCallback || clearTimeout

Check failure on line 142 in src/shared/components/ncEditor/NcEditor.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

'cancel' is assigned a value but never used
this.idleHandle = idle(() => {
if (this.initialized) return
this.initialized = true
this.setupEditor().then(() => {
this.editor?.setContent(this.localValue, false)
})
})
}
},
async setupEditor() {
this?.editor?.destroy()
if (this.textAppAvailable) {
Expand Down
Loading