diff options
author | Max <max@nextcloud.com> | 2022-03-08 12:22:20 +0300 |
---|---|---|
committer | Max <max@nextcloud.com> | 2022-03-08 12:29:13 +0300 |
commit | 3ca1038af5b2aa57d22a5aca8b40140ef35f25a3 (patch) | |
tree | 5cf7cb05f72c2fc528b047c47c5c1d3818d4946a /src | |
parent | a875a72ceeaeae34edd7411ac9d86f96d62e7937 (diff) |
refactor: extract logic into computedperformance/postpone/rendering-menubar
Also rename `initialLoading` in `EditorWrapper` to `contentLoaded`.
This flag is set during the `initialLoading` state change.
It does indicates that the loading happened
Use the past tense to indicate that.
The editor wrapper is now loading in different steps.
The menus will load after the content.
So `content` seems more fitting then `initial`.
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/EditorWrapper.vue | 24 |
1 files changed, 15 insertions, 9 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 63686c90e..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 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="initialLoading && !syncError && !readOnly" + <MenuBar v-if="renderMenus" ref="menubar" :editor="tiptap" :sync-service="syncService" @@ -58,11 +58,11 @@ </MenuBar> <div v-if="!menubarLoaded" class="menubar placeholder" /> <div ref="contentWrapper" class="content-wrapper"> - <MenuBubble v-if="initialLoading && !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> @@ -172,7 +172,7 @@ export default { idle: false, dirty: false, - initialLoading: false, + contentLoaded: false, lastSavedString: '', syncError: null, hasConnectionIssue: false, @@ -245,6 +245,12 @@ export default { displayed() { return this.currentSession && this.active }, + renderMenus() { + return this.contentLoaded + && this.isRichEditor + && !this.syncError + && !this.readOnly + }, }, watch: { lastSavedStatus() { @@ -419,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, @@ -439,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() } @@ -485,7 +491,7 @@ export default { }, reconnect() { - this.initialLoading = false + this.contentLoaded = false this.hasConnectionIssue = false if (this.syncService) { this.syncService.close().then(() => { |