Add more prefetching of components

public/index.html

@@ -8,7 +8,6 @@
 	<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
 
 	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/fonts.css" as="style">
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-700italic.woff2" as="font">
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-italic.woff2" as="font">
 	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-300.woff2" as="font">

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: {

src/router/index.js

@@ -3,28 +3,77 @@ import Router from 'vue-router'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
+import LoadingComponent from '../components/misc/loading'
+import ErrorComponent from '../components/misc/error'
 // User Handling
 import LoginComponent from '../views/user/Login'
 import RegisterComponent from '../views/user/Register'
-import PasswordResetComponent from '../views/user/PasswordReset'
-import GetPasswordResetComponent from '../views/user/RequestPasswordReset'
-import UserSettingsComponent from '../views/user/Settings'
+
+const PasswordResetComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "user-settings" */'../views/user/PasswordReset'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
+const GetPasswordResetComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "user-settings" */'../views/user/RequestPasswordReset'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
+const UserSettingsComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "user-settings" */'../views/user/Settings'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
 // List Handling
-import NewListComponent from '../views/list/NewList'
-import EditListComponent from '../views/list/EditList'
+const NewListComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/list/NewList'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
+const EditListComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/list/EditList'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
 import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
 import TaskDetailView from '../views/tasks/TaskDetailView'
 // Namespace Handling
-import NewNamespaceComponent from '../views/namespaces/NewNamespace'
-import EditNamespaceComponent from '../views/namespaces/EditNamespace'
+const NewNamespaceComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/namespaces/NewNamespace'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
+const EditNamespaceComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/namespaces/EditNamespace'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
 import ListNamespaces from '../views/namespaces/ListNamespaces'
 // Team Handling
 import ListTeamsComponent from '../views/teams/ListTeams'
-import EditTeamComponent from '../views/teams/EditTeam'
-import NewTeamComponent from '../views/teams/NewTeam'
+
+const EditTeamComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/teams/EditTeam'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
+const NewTeamComponent = () => ({
+	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/teams/NewTeam'),
+	loading: LoadingComponent,
+	error: ErrorComponent,
+	timeout: 60000,
+})
 // Label Handling
 import ListLabelsComponent from '../views/labels/ListLabels'
 // Migration

src/views/labels/ListLabels.vue

@@ -100,12 +100,19 @@
 	import LabelService from '../../services/label'
 	import LabelModel from '../../models/label'
 	import ColorPicker from '../../components/input/colorPicker'
+	import LoadingComponent from '../../components/misc/loading'
+	import ErrorComponent from '../../components/misc/error'
 
 	export default {
 		name: 'ListLabels',
 		components: {
 			ColorPicker,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		data() {
 			return {

src/views/list/EditList.vue

@@ -171,6 +171,8 @@
 	import NamespaceSearch from '../../components/namespace/namespace-search'
 	import ListDuplicateService from '../../services/listDuplicateService'
 	import ListDuplicateModel from '../../models/listDuplicateModel'
+	import LoadingComponent from '../../components/misc/loading'
+	import ErrorComponent from '../../components/misc/error'
 
 	export default {
 		name: 'EditList',
@@ -195,7 +197,12 @@
 			Fancycheckbox,
 			LinkSharing,
 			manageSharing,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		created() {
 			this.listService = new ListService()

src/views/namespaces/EditNamespace.vue

@@ -111,6 +111,8 @@
 	import NamespaceModel from '../../models/namespace'
 	import Fancycheckbox from '../../components/input/fancycheckbox'
 	import ColorPicker from '../../components/input/colorPicker'
+	import LoadingComponent from '../../components/misc/loading'
+	import ErrorComponent from '../../components/misc/error'
 
 	export default {
 		name: "EditNamespace",
@@ -129,7 +131,12 @@
 			ColorPicker,
 			Fancycheckbox,
 			manageSharing,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		beforeMount() {
 			this.namespace.id = this.$route.params.id

src/views/tasks/TaskDetailView.vue

@@ -343,6 +343,8 @@
 	import ListSearch from '../../components/tasks/partials/listSearch'
 	import ColorPicker from '../../components/input/colorPicker'
 	import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
+	import LoadingComponent from '../../components/misc/loading'
+	import ErrorComponent from '../../components/misc/error'
 
 	export default {
 		name: 'TaskDetailView',
@@ -359,7 +361,12 @@
 			PrioritySelect,
 			Comments,
 			flatPickr,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		mixins: [
 			attachmentUpload,

src/views/teams/EditTeam.vue

@@ -176,7 +176,6 @@
 
 <script>
 	import router from '../../router'
-	import multiselect from 'vue-multiselect'
 	import {mapState} from 'vuex'
 
 	import TeamService from '../../services/team'
@@ -185,6 +184,8 @@
 	import TeamMemberModel from '../../models/teamMember'
 	import UserModel from '../../models/user'
 	import UserService from '../../services/user'
+	import LoadingComponent from '../../components/misc/loading'
+	import ErrorComponent from '../../components/misc/error'
 
 	export default {
 		name: 'EditTeam',
@@ -208,8 +209,18 @@
 			}
 		},
 		components: {
-			multiselect,
-			editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'),
+			multiselect: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
+			editor: () => ({
+				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+				loading: LoadingComponent,
+				error: ErrorComponent,
+				timeout: 60000,
+			}),
 		},
 		created() {
 			this.teamService = new TeamService()