refactor: extract logic into computed

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>

src/components/EditorWrapper.vue

@@ -58,7 +58,7 @@
 						:editor="tiptap"
 						:content-wrapper="contentWrapper"
 						:file-path="relativePath" />
-					<EditorContent v-show="initialLoading"
+					<EditorContent v-show="contentLoaded"
 						class="editor__content"
 						:editor="tiptap" />
 				</div>
@@ -165,7 +165,7 @@ export default {
 
 			idle: false,
 			dirty: false,
-			initialLoading: false,
+			contentLoaded: false,
 			lastSavedString: '',
 			syncError: null,
 			hasConnectionIssue: false,
@@ -234,6 +234,12 @@ export default {
 		displayed() {
 			return this.currentSession && this.active
 		},
+		renderMenus() {
+			return this.contentLoaded
+				&& this.isRichEditor
+				&& !this.syncError
+				&& !this.readOnly
+		},
 	},
 	watch: {
 		lastSavedStatus() {
@@ -406,7 +412,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,
@@ -472,7 +478,7 @@ export default {
 		},
 
 		reconnect() {
-			this.initialLoading = false
+			this.contentLoaded = false
 			this.hasConnectionIssue = false
 			if (this.syncService) {
 				this.syncService.close().then(() => {