From cebc6eb03942552b09d9d999334954a040a7f74e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 2 Aug 2024 15:12:22 +0200
Subject: [PATCH 1/4] fix: Avoid flickering loading state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                                   | 11 +++---
 .../navigation/sections/Navigation.vue        | 12 +++----
 src/modules/sidebar/partials/ShareForm.vue    |  5 +--
 src/modules/sidebar/partials/ShareList.vue    |  4 +--
 .../sidebar/sections/SidebarIntegration.vue   |  4 +--
 src/store/store.js                            | 36 +++++++++++--------
 6 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 99a33f581..1ff21ebf4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,9 +2,9 @@
 	<NcContent app-name="tables">
 		<Navigation />
 		<NcAppContent>
-			<div v-if="somethingIsLoading" class="icon-loading" />
+			<div v-if="isLoadingSomething" class="icon-loading" />
 
-			<router-view v-if="!somethingIsLoading" />
+			<router-view v-if="!isLoadingSomething" />
 		</NcAppContent>
 		<Sidebar />
 	</NcContent>
@@ -13,7 +13,7 @@
 <script>
 import { NcContent, NcAppContent } from '@nextcloud/vue'
 import Navigation from './modules/navigation/sections/Navigation.vue'
-import { mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import Sidebar from './modules/sidebar/sections/Sidebar.vue'
 import { useResizeObserver } from '@vueuse/core'
 import { loadState } from '@nextcloud/initial-state'
@@ -39,10 +39,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['tablesLoading', 'contextsLoading']),
-		somethingIsLoading() {
-			return this.tablesLoading || this.contextsLoading || this.loading
-		},
+		...mapGetters(['isLoadingSomething']),
 	},
 	watch: {
 		'$route'(to, from) {
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index ea6fc02cf..5fb3faffd 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -9,9 +9,9 @@
 				</NcTextField>
 			</div>
 
-			<div v-if="tablesLoading" class="icon-loading" />
+			<div v-if="isLoadingSomething" class="icon-loading" />
 
-			<ul v-if="!tablesLoading">
+			<ul v-if="!isLoadingSomething">
 				<NcAppNavigationCaption v-if="getFavoriteNodes.length > 0" :name="t('tables', 'Favorites')" />
 
 				<!-- FAVORITES -->
@@ -56,8 +56,7 @@
 						:filter-string="filterString" :table="table" />
 				</NcAppNavigationItem>
 			</ul>
-			<div v-if="contextsLoading" class="icon-loading" />
-			<ul v-if="!contextsLoading">
+			<ul v-if="!isLoadingSomething">
 				<NcAppNavigationCaption :name="t('tables', 'Applications')">
 					<template #actions>
 						<NcActionButton :aria-label="t('tables', 'Create application')" icon="icon-add" data-cy="createContextIcon"
@@ -102,7 +101,7 @@ import {
 import NavigationViewItem from '../partials/NavigationViewItem.vue'
 import NavigationTableItem from '../partials/NavigationTableItem.vue'
 import NavigationContextItem from '../partials/NavigationContextItem.vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import Archive from 'vue-material-design-icons/Archive.vue'
@@ -134,7 +133,8 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['appNavCollapsed', 'tables', 'views', 'tablesLoading', 'contexts', 'contextsLoading']),
+		...mapState(['appNavCollapsed', 'tables', 'views', 'contexts']),
+		...mapGetters(['isLoadingSomething', 'isLoading']),
 		getAllNodes() {
 			return [...this.getFilteredTables, ...this.getOwnViews, ...this.getSharedViews]
 		},
diff --git a/src/modules/sidebar/partials/ShareForm.vue b/src/modules/sidebar/partials/ShareForm.vue
index 5ff28f5d7..e8865f8d9 100644
--- a/src/modules/sidebar/partials/ShareForm.vue
+++ b/src/modules/sidebar/partials/ShareForm.vue
@@ -44,7 +44,7 @@
 import { generateOcsUrl } from '@nextcloud/router'
 import axios from '@nextcloud/axios'
 import { NcSelect } from '@nextcloud/vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import formatting from '../../../shared/mixins/formatting.js'
 import ShareTypes from '../../../shared/mixins/shareTypesMixin.js'
 import searchUserGroup from '../../../shared/mixins/searchUserGroup.js'
@@ -74,7 +74,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading', 'showSidebar']),
+		...mapState(['tables', 'showSidebar']),
+		...mapGetters(['isLoadingSomething']),
 	},
 
 	mounted() {
diff --git a/src/modules/sidebar/partials/ShareList.vue b/src/modules/sidebar/partials/ShareList.vue
index fa39cae8c..9194df70b 100644
--- a/src/modules/sidebar/partials/ShareList.vue
+++ b/src/modules/sidebar/partials/ShareList.vue
@@ -158,8 +158,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading', 'showSidebar']),
-		...mapGetters(['activeElement', 'isView']),
+		...mapState(['tables', 'showSidebar']),
+		...mapGetters(['isLoadingSomething', 'activeElement', 'isView']),
 		sortedShares() {
 			return [...this.userShares, ...this.groupShares].slice()
 				.sort(this.sortByDisplayName)
diff --git a/src/modules/sidebar/sections/SidebarIntegration.vue b/src/modules/sidebar/sections/SidebarIntegration.vue
index ea63eadbe..5fd39495d 100644
--- a/src/modules/sidebar/sections/SidebarIntegration.vue
+++ b/src/modules/sidebar/sections/SidebarIntegration.vue
@@ -64,8 +64,8 @@ export default {
 	},
 
 	computed: {
-		...mapState(['tables', 'tablesLoading']),
-		...mapGetters(['activeElement', 'isView']),
+		...mapState(['tables']),
+		...mapGetters(['activeElement', 'isLoadingSomething', 'isView']),
 		apiEndpointUrl() {
 			const params = {
 				elementId: this.activeElement.id,
diff --git a/src/store/store.js b/src/store/store.js
index 4d7a4e7fa..2a3f8e4a9 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -17,12 +17,15 @@ export default new Vuex.Store({
 	},
 
 	state: {
-		tablesLoading: false,
+		loading: {
+			tables: true,
+			viewsShared: true,
+			contexts: true,
+		},
 		tables: [],
 		views: [],
 		templates: [],
 		contexts: [],
-		contextsLoading: false,
 		activeViewId: null,
 		activeTableId: null,
 		activeRowId: null,
@@ -70,16 +73,19 @@ export default new Vuex.Store({
 		isView(state) {
 			return state.activeElementIsView
 		},
+		isLoading(state) {
+			return (key) => state.loading[key] ?? false
+		},
+		isLoadingSomething(state) {
+			return Object.keys(state.loading).filter(key => state.loading[key]).length > 0
+		},
 	},
 	mutations: {
 		setAppNavCollapsed(state, value) {
 			state.appNavCollapsed = !!(value)
 		},
-		setTablesLoading(state, value) {
-			state.tablesLoading = !!(value)
-		},
-		setContextsLoading(state, value) {
-			state.contextsLoading = !!(value)
+		setLoading(state, { key, value }) {
+			state.loading[key] = !!(value)
 		},
 		setActiveViewId(state, viewId) {
 			if (state.activeViewId !== viewId) {
@@ -149,7 +155,7 @@ export default new Vuex.Store({
 			return res.data
 		},
 		async loadTablesFromBE({ commit, state }) {
-			commit('setTablesLoading', true)
+			commit('setLoading', { key: 'tables', value: true })
 
 			try {
 				const res = await axios.get(generateUrl('/apps/tables/table'))
@@ -164,11 +170,11 @@ export default new Vuex.Store({
 				showError(t('tables', 'Could not fetch tables'))
 			}
 
-			commit('setTablesLoading', false)
+			commit('setLoading', { key: 'tables', value: false })
 			return true
 		},
 		async loadViewsSharedWithMeFromBE({ commit, state }) {
-			commit('setTablesLoading', true)
+			commit('setLoading', { key: 'viewsShared', value: true })
 
 			try {
 				const res = await axios.get(generateUrl('/apps/tables/view'))
@@ -182,7 +188,7 @@ export default new Vuex.Store({
 				showError(t('tables', 'Could not load shared views'))
 			}
 
-			commit('setTablesLoading', false)
+			commit('setLoading', { key: 'viewsShared', value: false })
 			return true
 		},
 		async loadTemplatesFromBE({ commit }) {
@@ -374,7 +380,7 @@ export default new Vuex.Store({
 			}
 		},
 		async insertNewContext({ commit, state, dispatch }, { data, receivers }) {
-			commit('setContextsLoading', true)
+			commit('setLoading', { key: 'contexts', value: true })
 			let res = null
 
 			try {
@@ -391,7 +397,7 @@ export default new Vuex.Store({
 			contexts.push(res.data.ocs.data)
 			commit('setContexts', contexts)
 
-			commit('setContextsLoading', false)
+			commit('setLoading', { key: 'contexts', value: false })
 			return res.data.ocs.data
 		},
 		async updateContext({ state, commit, dispatch }, { id, data, previousReceivers, receivers }) {
@@ -429,7 +435,7 @@ export default new Vuex.Store({
 		},
 
 		async getAllContexts({ commit, state }) {
-			commit('setContextsLoading', true)
+			commit('setLoading', { key: 'contexts', value: true })
 			try {
 				const res = await axios.get(generateOcsUrl('/apps/tables/api/2/contexts'))
 				commit('setContexts', res.data.ocs.data)
@@ -438,7 +444,7 @@ export default new Vuex.Store({
 				displayError(e, t('tables', 'Could not load applications.'))
 				showError(t('tables', 'Could not fetch applications'))
 			}
-			commit('setContextsLoading', false)
+			commit('setLoading', { key: 'contexts', value: false })
 			return true
 		},
 

From bbd3459bc896170bf6a9347ff22b6c6dc24e1c43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 2 Aug 2024 15:12:45 +0200
Subject: [PATCH 2/4] fix: No console errors for elements that could not be
 found
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                        | 6 +++---
 src/modules/modals/CreateTable.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1ff21ebf4..39b3ce3ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -99,9 +99,9 @@ export default {
 			}
 		},
 		switchActiveMenuEntry(targetElement) {
-			const currentlyActive = document.querySelector('header .header-left .app-menu li.app-menu-entry__active')
-			currentlyActive.classList.remove('app-menu-entry__active')
-			targetElement.classList.add('app-menu-entry__active')
+			const currentlyActive = document.querySelector('header .header-left .app-menu li.app-menu-entry--active')
+			currentlyActive.classList.remove('app-menu-entry--active')
+			targetElement.classList.add('app-menu-entry--active')
 		},
 		setPageTitle(title) {
 			if (this.defaultPageTitle === false) {
diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
index 8eeaf10c1..a09ad1e47 100644
--- a/src/modules/modals/CreateTable.vue
+++ b/src/modules/modals/CreateTable.vue
@@ -132,7 +132,7 @@ export default {
 		showModal() {
 			// every time when the modal opens chose a new emoji
 			this.loadEmoji()
-			this.$nextTick(() => this.$refs.titleInput.focus())
+			this.$nextTick(() => this.$refs?.titleInput?.focus())
 		},
 	},
 	methods: {

From d59e9c2f77930f2256ad865c79e314d8c12b30b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 2 Aug 2024 15:13:07 +0200
Subject: [PATCH 3/4] fix: Only render sidebar if visible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/modules/sidebar/sections/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/sidebar/sections/Sidebar.vue b/src/modules/sidebar/sections/Sidebar.vue
index 68c3c8055..97c58016d 100644
--- a/src/modules/sidebar/sections/Sidebar.vue
+++ b/src/modules/sidebar/sections/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NcAppSidebar v-show="showSidebar"
+		<NcAppSidebar v-if="showSidebar"
 			:active="activeSidebarTab"
 			:name="elementTitle"
 			@update:active="tab => activeSidebarTab = tab"

From d2b20869a3fe53266b3624d9d36523d4c92143bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 2 Aug 2024 15:13:22 +0200
Subject: [PATCH 4/4] fix: Avoid full table/view list reloading on insert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/store/store.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/store/store.js b/src/store/store.js
index 2a3f8e4a9..96f8dc81a 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -144,14 +144,11 @@ export default new Vuex.Store({
 				displayError(e, t('tables', 'Could not insert table.'))
 				return false
 			}
-			if (data.template !== 'custom') {
-				await dispatch('loadTablesFromBE')
-				await dispatch('loadViewsSharedWithMeFromBE')
-			} else {
-				const tables = state.tables
-				tables.push(res.data)
-				commit('setTables', tables)
-			}
+
+			const tables = state.tables
+			tables.push(res.data)
+			commit('setTables', tables)
+
 			return res.data
 		},
 		async loadTablesFromBE({ commit, state }) {