diff options
| author | Max <max@nextcloud.com> | 2022-02-23 13:43:51 +0300 |
|---|---|---|
| committer | Max <max@nextcloud.com> | 2022-03-07 12:13:59 +0300 |
| commit | a875a72ceeaeae34edd7411ac9d86f96d62e7937 (patch) | |
| tree | 250f39b40db21afbffdd132e849ac0e521a47c27 /src | |
| parent | d96b9097540528fcdf0160bca5732309f9f02af9 (diff) | |
display content first and then load menus
Rendering the menubar and menububble takes a significant amount of time.
First display the content and then render the menus.
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 22 | ||||
| -rw-r--r-- | src/components/MenuBar.vue | 1 |
2 files changed, 20 insertions, 3 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 512d6bc84..63686c90e 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -34,8 +34,8 @@ </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="tiptap" id="editor"> + <MenuBar v-if="initialLoading && !syncError && !readOnly" 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,8 +56,9 @@ </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="initialLoading && !readOnly && isRichEditor" :editor="tiptap" :content-wrapper="contentWrapper" :file-path="relativePath" /> @@ -176,6 +178,7 @@ export default { hasConnectionIssue: false, readOnly: true, forceRecreate: false, + menubarLoaded: false, saveStatusPolling: null, displayHelp: false, @@ -694,6 +697,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) |