From b1b5398c56490bccd607845faa8d43383b9eb94a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 27 Jul 2020 19:53:19 +0200
Subject: [PATCH] Add more prefetching of components

---
 public/index.html                             |  1 -
 src/components/misc/error.vue                 | 12 ++++
 src/components/misc/loading.vue               | 19 ++++++
 src/components/namespace/namespace-search.vue | 11 ++-
 src/components/sharing/userTeam.vue           | 10 ++-
 src/components/tasks/edit-task.vue            |  9 ++-
 src/components/tasks/partials/comments.vue    |  9 ++-
 .../tasks/partials/editAssignees.vue          | 10 ++-
 src/components/tasks/partials/editLabels.vue  | 10 ++-
 src/components/tasks/partials/listSearch.vue  | 10 ++-
 .../tasks/partials/relatedTasks.vue           | 10 ++-
 src/router/index.js                           | 67 ++++++++++++++++---
 src/views/labels/ListLabels.vue               |  9 ++-
 src/views/list/EditList.vue                   |  9 ++-
 src/views/namespaces/EditNamespace.vue        |  9 ++-
 src/views/tasks/TaskDetailView.vue            |  9 ++-
 src/views/teams/EditTeam.vue                  | 17 ++++-
 17 files changed, 199 insertions(+), 32 deletions(-)
 create mode 100644 src/components/misc/error.vue
 create mode 100644 src/components/misc/loading.vue

diff --git a/public/index.html b/public/index.html
index c1f11877d1..a120cb5fc6 100644
--- a/public/index.html
+++ b/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">
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
new file mode 100644
index 0000000000..34e8bcfc3c
--- /dev/null
+++ b/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>
diff --git a/src/components/misc/loading.vue b/src/components/misc/loading.vue
new file mode 100644
index 0000000000..9e8eeff5e9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/namespace/namespace-search.vue b/src/components/namespace/namespace-search.vue
index 6cc4b55822..e058a7f7cc 100644
--- a/src/components/namespace/namespace-search.vue
+++ b/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()
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index cbd27a37d6..92ae571864 100644
--- a/src/components/sharing/userTeam.vue
+++ b/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
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 9fdb8b553b..9e01b13fad 100644
--- a/src/components/tasks/edit-task.vue
+++ b/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: {
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 6aa34cbf71..ac6f958d3a 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/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,
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 1d2cd7d5cf..fcec02a079 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/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: {
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index bab3c2f0c4..f393bec569 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/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) {
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 9f518a6c38..7e7c49f892 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/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()
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index e4cb7a1770..de7b1c5e59 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/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: {
diff --git a/src/router/index.js b/src/router/index.js
index e18d1c268b..9cc7697005 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index dc7368e3c3..44f2529f9e 100644
--- a/src/views/labels/ListLabels.vue
+++ b/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 {
diff --git a/src/views/list/EditList.vue b/src/views/list/EditList.vue
index 437623f7e1..15efe4f53b 100644
--- a/src/views/list/EditList.vue
+++ b/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()
diff --git a/src/views/namespaces/EditNamespace.vue b/src/views/namespaces/EditNamespace.vue
index df951cb05f..2bcc150f5e 100644
--- a/src/views/namespaces/EditNamespace.vue
+++ b/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
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 8c92727feb..ac651563d4 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/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,
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 1cc2bf3b50..37b23da993 100644
--- a/src/views/teams/EditTeam.vue
+++ b/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()