diff options
author | Julius Härtl <jus@bitgrid.net> | 2022-03-09 00:51:49 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-09 00:51:49 +0300 |
commit | f04d31da3d0ea8b909998f3846f88b96a24fd31c (patch) | |
tree | 5cf7cb05f72c2fc528b047c47c5c1d3818d4946a /src | |
parent | d96b9097540528fcdf0160bca5732309f9f02af9 (diff) | |
parent | 3ca1038af5b2aa57d22a5aca8b40140ef35f25a3 (diff) |
Merge pull request #2226 from nextcloud/performance/postpone/rendering-menubar
display content first and then load menus
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EditorWrapper.vue | 42 | ||||
-rw-r--r-- | src/components/MenuBar.vue | 1 |
2 files changed, 33 insertions, 10 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 512d6bc84..65cba4a61 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -33,9 +33,9 @@ {{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a> </p> </div> - <div v-if="displayed" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}"> - <div id="editor"> - <MenuBar v-if="tiptap && !syncError && !readOnly" + <div v-if="displayed" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !contentLoaded && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}"> + <div v-if="tiptap" id="editor"> + <MenuBar v-if="renderMenus" ref="menubar" :editor="tiptap" :sync-service="syncService" @@ -44,6 +44,7 @@ :is-rich-editor="isRichEditor" :is-public="isPublic" :autohide="autohide" + :loaded.sync="menubarLoaded" @show-help="showHelp"> <div id="editor-session-list"> <div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass"> @@ -55,12 +56,13 @@ </div> <slot name="header" /> </MenuBar> + <div v-if="!menubarLoaded" class="menubar placeholder" /> <div ref="contentWrapper" class="content-wrapper"> - <MenuBubble v-if="tiptap && !readOnly && isRichEditor" + <MenuBubble v-if="renderMenus" :editor="tiptap" :content-wrapper="contentWrapper" :file-path="relativePath" /> - <EditorContent v-show="initialLoading" + <EditorContent v-show="contentLoaded" class="editor__content" :editor="tiptap" /> </div> @@ -170,12 +172,13 @@ export default { idle: false, dirty: false, - initialLoading: false, + contentLoaded: false, lastSavedString: '', syncError: null, hasConnectionIssue: false, readOnly: true, forceRecreate: false, + menubarLoaded: false, saveStatusPolling: null, displayHelp: false, @@ -242,6 +245,12 @@ export default { displayed() { return this.currentSession && this.active }, + renderMenus() { + return this.contentLoaded + && this.isRichEditor + && !this.syncError + && !this.readOnly + }, }, watch: { lastSavedStatus() { @@ -416,7 +425,7 @@ export default { .on('error', (error, data) => { this.tiptap.setOptions({ editable: false }) if (error === ERROR_TYPE.SAVE_COLLISSION && (!this.syncError || this.syncError.type !== ERROR_TYPE.SAVE_COLLISSION)) { - this.initialLoading = true + this.contentLoaded = true this.syncError = { type: error, data, @@ -436,8 +445,8 @@ export default { this.$emit('ready') }) .on('stateChange', (state) => { - if (state.initialLoading && !this.initialLoading) { - this.initialLoading = true + if (state.initialLoading && !this.contentLoaded) { + this.contentLoaded = true if (this.autofocus && !this.readOnly) { this.tiptap.commands.focus() } @@ -482,7 +491,7 @@ export default { }, reconnect() { - this.initialLoading = false + this.contentLoaded = false this.hasConnectionIssue = false if (this.syncService) { this.syncService.close().then(() => { @@ -694,6 +703,19 @@ export default { padding-top: 50px; } } + + .menubar.placeholder { + position: fixed; + position: -webkit-sticky; + position: sticky; + top: 0; + opacity: 0; + visibility: hidden; + height: 44px; // important for mobile so that the buttons are always inside the container + padding-top:3px; + padding-bottom: 3px; + } + </style> <style lang="scss"> @import './../../css/style'; diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index 74f1bd27d..c41a800c7 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -313,6 +313,7 @@ export default { clearInterval(this.checkInterval) } }, 100) + this.$emit('update:loaded', true) }, beforeDestroy() { window.removeEventListener('resize', this.getWindowWidth) |