Remove (almost) all use of dynamic imports

Dynamic imports reduce the bundle size of the main `index.js` file,
but they cause problems when deploying new versions of the app because
previous versions of the bundle files (which are still possibly
referenced by a running app) are removed.

We keep one exception for this change: the `Api.js` bundle is still
loaded dynamically because of its size (almost the same as `index.js`
itself).

CHANGELOG.md

@@ -10,6 +10,8 @@ All notable changes to this project will be documented in this file. The format
 - Organization, department and product filter in admin panel should no longer
   disappear when search result count reaches certain threshold.
 - Improved WCAG compliance with respect to text color contrast.
+- Fixed a problem that would sometimes cause an "infinite spinner" when a new
+  version of the app was deployed.
 
 ### Changed
 

src/components/EmptyState.vue

@@ -16,11 +16,13 @@
 </template>
 
 <script>
+import BuildingsGraphic from '@/components/graphics/BuildingsGraphic.vue';
+
 export default {
   name: 'EmptyState',
 
   components: {
-    BuildingsGraphic: () => import('@/components/graphics/BuildingsGraphic.vue'),
+    BuildingsGraphic,
   },
 
   props: {

src/components/FormComponent.vue

@@ -105,13 +105,13 @@
 </template>
 
 <script>
-import { PktButton } from '@oslokommune/punkt-vue2';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 
 export default {
   name: 'FormComponent',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
     PktButton,
   },
 

src/components/GanttChart.vue

@@ -93,12 +93,13 @@ import {
   startOfMonth,
 } from 'date-fns';
 import { dateLongCompact } from '@/util';
+import ObjectiveRow from '@/components/ObjectiveRow.vue';
 
 export default {
   name: 'GanttChart',
 
   components: {
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
+    ObjectiveRow,
   },
 
   props: {

src/components/KeyResultRow.vue

@@ -22,12 +22,13 @@
 <script>
 import { format } from 'd3-format';
 import { numberLocale } from '@/util';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'KeyResultRow',
 
   components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    ProgressBar,
   },
 
   props: {

src/components/KeyResultsList.vue

@@ -13,13 +13,15 @@
 
 <script>
 import { db } from '@/config/firebaseConfig';
+import EmptyState from '@/components/EmptyState.vue';
+import KeyResultRow from '@/components/KeyResultRow.vue';
 
 export default {
   name: 'KeyResultsList',
 
   components: {
-    EmptyState: () => import('@/components/EmptyState.vue'),
-    KeyResultRow: () => import('@/components/KeyResultRow.vue'),
+    EmptyState,
+    KeyResultRow,
   },
 
   props: {

src/components/KpiDetails.vue

@@ -68,25 +68,28 @@
 import { mapState, mapGetters } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
-import Progress from '@/db/Kpi/Progress';
 import {
   filterDuplicatedProgressValues,
   getCachedKPIProgress,
   getKPIProgressQuery,
 } from '@/util/kpiHelpers';
+import EditGoalsModal from '@/components/modals/EditGoalsModal.vue';
+import HTMLOutput from '@/components/HTMLOutput.vue';
+import Progress from '@/db/Kpi/Progress';
+import ProgressModal from '@/components/modals/KPIProgressModal.vue';
 import WidgetKpiProgressGraph from '@/components/widgets/WidgetKpiProgressGraph.vue';
-import WidgetKpiProgressStats from '@/components/widgets/WidgetKpiProgressStats.vue';
 import WidgetKpiProgressHistory from '@/components/widgets/WidgetProgressHistory/WidgetKpiProgressHistory.vue';
+import WidgetKpiProgressStats from '@/components/widgets/WidgetKpiProgressStats.vue';
 
 export default {
   name: 'KpiDetails',
 
   components: {
     PktAlert,
     PktButton,
-    HTMLOutput: () => import('@/components/HTMLOutput.vue'),
-    ProgressModal: () => import('@/components/modals/KPIProgressModal.vue'),
-    EditGoalsModal: () => import('@/components/modals/EditGoalsModal.vue'),
+    ProgressModal,
+    HTMLOutput,
+    EditGoalsModal,
     WidgetKpiProgressGraph,
     WidgetKpiProgressHistory,
     WidgetKpiProgressStats,

src/components/ObjectiveRow.vue

@@ -24,12 +24,13 @@
 <script>
 import { mapState } from 'vuex';
 import { format } from 'd3-format';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'ObjectiveRow',
 
   components: {
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    ProgressBar,
   },
 
   props: {

src/components/ObjectiveWorkbench.vue

@@ -74,14 +74,17 @@
 import { format } from 'd3-format';
 import { mapActions, mapGetters } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
+import KeyResultsList from '@/components/KeyResultsList.vue';
+import ObjectiveRow from '@/components/ObjectiveRow.vue';
+import ProgressBar from '@/components/ProgressBar.vue';
 
 export default {
   name: 'ObjectiveWorkbench',
 
   components: {
-    KeyResultsList: () => import('@/components/KeyResultsList.vue'),
-    ObjectiveRow: () => import('@/components/ObjectiveRow.vue'),
-    ProgressBar: () => import('@/components/ProgressBar.vue'),
+    KeyResultsList,
+    ObjectiveRow,
+    ProgressBar,
     PktButton,
   },
 

src/components/drawers/EditItemDrawer.vue

@@ -157,13 +157,14 @@ import Product from '@/db/Product';
 import { db } from '@/config/firebaseConfig';
 import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditItemDrawer',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ArchivedRestore,
     PktAlert,
     PktButton,
     PagedDrawerWrapper,

src/components/drawers/EditKeyResult.vue

@@ -151,13 +151,14 @@ import KeyResult from '@/db/KeyResult';
 import { isDepartment, isOrganization } from '@/util/getActiveItemType';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditKeyResult',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
+    ArchivedRestore,
     PktButton,
     PagedDrawerWrapper,
     FormSection,

src/components/drawers/EditObjective.vue

@@ -115,14 +115,16 @@ import firebase from 'firebase/compat/app';
 import locale from 'flatpickr/dist/l10n/no';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, BtnSave, BtnDelete, BtnCancel } from '@/components/generic/form';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+import PeriodShortcut from '@/components/period/PeriodShortcut.vue';
 
 export default {
   name: 'EditObjective',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    PeriodShortcut: () => import('@/components/period/PeriodShortcut.vue'),
+    ArchivedRestore,
+    PeriodShortcut,
     PktButton,
     PagedDrawerWrapper,
     FormSection,

src/components/drawers/KpiDrawer.vue

@@ -215,26 +215,27 @@
 
 <script>
 import { mapState } from 'vuex';
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
 import { functions } from '@/config/firebaseConfig';
-import Kpi from '@/db/Kpi';
 import {
   kpiFormats,
   kpiStartValues,
   kpiTypes,
   kpiTrendOptions,
   kpiUpdateFrequencies,
 } from '@/util/kpiHelpers';
-import { PktButton } from '@oslokommune/punkt-vue2';
 import { FormSection, ToggleButton, BtnSave, BtnDelete } from '@/components/generic/form';
-import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
+import ArchivedRestore from '@/components/ArchivedRestore.vue';
 import GoogleSheetsFormGroup from '@/components/forms/partials/GoogleSheetsFormGroup.vue';
+import Kpi from '@/db/Kpi';
+import PagedDrawerWrapper from '@/components/drawers/PagedDrawerWrapper.vue';
 
 export default {
   name: 'EditItemDrawer',
 
   components: {
-    ArchivedRestore: () => import('@/components/ArchivedRestore.vue'),
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    ArchivedRestore,
+    PktAlert,
     PktButton,
     PagedDrawerWrapper,
     FormSection,

src/components/drawers/PagedDrawerWrapper.vue

@@ -36,14 +36,15 @@
 </template>
 
 <script>
+import ClappingHands from '@/components/ClappingHands.vue';
 import SliderContainer from '@/components/drawers/SliderContainer.vue';
 
 export default {
   name: 'PagedDrawerWrapper',
 
   components: {
     SliderContainer,
-    ClappingHands: () => import('@/components/ClappingHands.vue'),
+    ClappingHands,
   },
 
   props: {

src/components/generic/form/FormSection.vue

@@ -35,11 +35,13 @@
 </template>
 
 <script>
+import { PktAlert } from '@oslokommune/punkt-vue2';
+
 export default {
   name: 'FormSection',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
   },
 
   props: {

src/components/modals/KPIProgressModal.vue

@@ -84,17 +84,18 @@
 
 <script>
 import { endOfDay } from 'date-fns';
-import Progress from '@/db/Kpi/Progress';
+import { PktAlert } from '@oslokommune/punkt-vue2';
 import { dateShort } from '@/util';
 import { formatKPIValue } from '@/util/kpiHelpers';
+import Progress from '@/db/Kpi/Progress';
+import ProgressModal from '@/components/modals/ProgressModal.vue';
 import ProgressUpdateAPIExample from '@/components/ProgressUpdateAPIExample.vue';
-import ProgressModal from './ProgressModal.vue';
 
 export default {
   name: 'KPIProgressModal',
 
   components: {
-    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    PktAlert,
     ProgressUpdateAPIExample,
   },
 

src/components/widgets/WidgetKeyResultDetails.vue

@@ -111,13 +111,15 @@ import { mapState } from 'vuex';
 import { db } from '@/config/firebaseConfig';
 import { dateLong } from '@/util';
 import formattedPeriod from '@/util/okr';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
+import Widget from './WidgetWrapper.vue';
 
 export default {
   name: 'WidgetKeyResultDetails',
 
   components: {
-    Widget: () => import('./WidgetWrapper.vue'),
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    Widget,
+    ProfileModal,
   },
 
   data: () => ({

src/components/widgets/WidgetKeyResultNotes.vue

@@ -37,8 +37,9 @@ import { mapState } from 'vuex';
 import { marked } from 'marked';
 import { PktButton } from '@oslokommune/punkt-vue2';
 import dompurify from 'dompurify';
-import KeyResult from '@/db/KeyResult';
 import { BtnSave } from '@/components/generic/form';
+import KeyResult from '@/db/KeyResult';
+import Widget from './WidgetWrapper.vue';
 
 marked.setOptions({
   smartypants: true,
@@ -50,7 +51,7 @@ export default {
   components: {
     BtnSave,
     PktButton,
-    Widget: () => import('./WidgetWrapper.vue'),
+    Widget,
   },
 
   data: () => ({

src/components/widgets/WidgetObjectiveDetails.vue

@@ -71,13 +71,15 @@
 import { mapState } from 'vuex';
 import { dateLong } from '@/util';
 import formattedPeriod from '@/util/okr';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
+import Widget from './WidgetWrapper.vue';
 
 export default {
   name: 'WidgetObjectiveDetails',
 
   components: {
-    Widget: () => import('./WidgetWrapper.vue'),
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    Widget,
+    ProfileModal,
   },
 
   data: () => ({

src/components/widgets/WidgetProgressHistory/ProgressHistoryTable.vue

@@ -116,17 +116,19 @@
 <script>
 import { mapGetters } from 'vuex';
 import { PktButton } from '@oslokommune/punkt-vue2';
-import LoadingSmall from '@/components/LoadingSmall.vue';
 import { BtnDelete } from '@/components/generic/form/buttons';
+import EmptyState from '@/components/EmptyState.vue';
+import LoadingSmall from '@/components/LoadingSmall.vue';
+import ProfileModal from '@/components/modals/ProfileModal.vue';
 import UserLink from './UserLink.vue';
 
 export default {
   name: 'ProgressHistoryTable',
 
   components: {
-    EmptyState: () => import('@/components/EmptyState.vue'),
+    EmptyState,
     PktButton,
-    ProfileModal: () => import('@/components/modals/ProfileModal.vue'),
+    ProfileModal,
     LoadingSmall,
     UserLink,
     BtnDelete,