Add more prefetching of components

src/components/misc/error.vue

@@ -0,0 +1,12 @@
+<template>
+	<div class="notification is-danger">
+		Loading failed, please <a @click="() => location.reload()">try again</a>.
+		If the error persists, please <a href="https://vikunja.io/contact/">contact us</a>.
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'error'
+	}
+</script>

src/components/misc/loading.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="loader-container is-loading"></div>
+</template>
+
+<script>
+	export default {
+		name: 'loading'
+	}
+</script>
+
+<style scoped>
+	.loader-container {
+		height: 100%;
+		min-height: 200px;
+		width: 100%;
+		min-width: 600px;
+		max-width: 100vw;
+	}
+</style>

src/components/namespace/namespace-search.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script>
-	import multiselect from 'vue-multiselect'
-
 	import NamespaceService from '../../services/namespace'
 	import NamespaceModel from '../../models/namespace'
+	import LoadingComponent from '../misc/loading'
+	import ErrorComponent from '../misc/error'
 
 	export default {
 		name: 'namespace-search',
@@ -37,7 +37,12 @@
 			}
 		},
 		components: {
-			multiselect,
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		created() {
 			this.namespaceService = new NamespaceService()

src/components/sharing/userTeam.vue

@@ -106,7 +106,6 @@
 </template>
 
 <script>
-	import multiselect from 'vue-multiselect'
 	import {mapState} from 'vuex'
 
 	import UserNamespaceService from '../../services/userNamespace'
@@ -124,6 +123,8 @@
 	import TeamModel from '../../models/team'
 
 	import rights from '../../models/rights'
+	import LoadingComponent from '../misc/loading'
+	import ErrorComponent from '../misc/error'
 
 	export default {
 		name: 'userTeamShare',
@@ -163,7 +164,12 @@
 			}
 		},
 		components: {
-			multiselect
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		computed: mapState({
 			userInfo: state => state.auth.info

src/components/tasks/edit-task.vue

@@ -161,6 +161,8 @@
 	import RepeatAfter from './partials/repeatAfter'
 	import Reminders from './partials/reminders'
 	import ColorPicker from '../input/colorPicker'
+	import LoadingComponent from '../misc/loading'
+	import ErrorComponent from '../misc/error'
 
 	export default {
 		name: 'edit-task',
@@ -196,7 +198,12 @@
 			PercentDoneSelect,
 			PrioritySelect,
 			flatPickr,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		props: {
 			task: {

src/components/tasks/partials/comments.vue

@@ -75,11 +75,18 @@
 	import TaskCommentService from '../../../services/taskComment'
 	import TaskCommentModel from '../../../models/taskComment'
 	import attachmentUpload from '../mixins/attachmentUpload'
+	import LoadingComponent from '../../misc/loading'
+	import ErrorComponent from '../../misc/error'
 
 	export default {
 		name: 'comments',
 		components: {
-			editor: () => import(/* webpackPrefetch: true */ '../../input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		mixins: [
 			attachmentUpload,

src/components/tasks/partials/editAssignees.vue

@@ -34,18 +34,24 @@
 
 <script>
 	import {differenceWith} from 'lodash'
-	import multiselect from 'vue-multiselect'
 
 	import UserModel from '../../../models/user'
 	import ListUserService from '../../../services/listUsers'
 	import TaskAssigneeService from '../../../services/taskAssignee'
 	import User from '../../misc/user'
+	import LoadingComponent from '../../misc/loading'
+	import ErrorComponent from '../../misc/error'
 
 	export default {
 		name: 'editAssignees',
 		components: {
 			User,
-			multiselect,
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		props: {
 			taskId: {

src/components/tasks/partials/editLabels.vue

@@ -36,11 +36,12 @@
 
 <script>
 	import { differenceWith } from 'lodash'
-	import multiselect from 'vue-multiselect'
 
 	import LabelService from '../../../services/label'
 	import LabelModel from '../../../models/label'
 	import LabelTaskService from '../../../services/labelTask'
+	import LoadingComponent from '../../misc/loading'
+	import ErrorComponent from '../../misc/error'
 
 	export default {
 		name: 'edit-labels',
@@ -65,7 +66,12 @@
 			}
 		},
 		components: {
-			multiselect,
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		watch: {
 			value(newLabels) {

src/components/tasks/partials/listSearch.vue

@@ -29,7 +29,8 @@
 <script>
 	import ListService from '../../../services/list'
 	import ListModel from '../../../models/list'
-	import multiselect from 'vue-multiselect'
+	import LoadingComponent from '../../misc/loading'
+	import ErrorComponent from '../../misc/error'
 
 	export default {
 		name: 'listSearch',
@@ -41,7 +42,12 @@
 			}
 		},
 		components: {
-			multiselect,
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		beforeMount() {
 			this.listSerivce = new ListService()

src/components/tasks/partials/relatedTasks.vue

@@ -88,7 +88,8 @@
 	import relationKinds from '../../../models/relationKinds'
 	import TaskRelationModel from '../../../models/taskRelation'
 
-	import multiselect from 'vue-multiselect'
+	import LoadingComponent from '../../misc/loading'
+	import ErrorComponent from '../../misc/error'
 
 	export default {
 		name: 'relatedTasks',
@@ -106,7 +107,12 @@
 			}
 		},
 		components: {
-			multiselect,
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		props: {
 			taskId: {