3 files changed, 66 insertions, 1 deletions
diff --git a/src/components/big_spinner/big_spinner.vue b/src/components/big_spinner/big_spinner.vue
new file mode 100644
index 00000000..cda28de5
--- /dev/null
+++ b/src/components/big_spinner/big_spinner.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="big-spinner">
+    <i class="icon-spin4 animate-spin" />
+  </div>
+</template>
+
+<style lang="scss">
+.big-spinner {
+  font-size: 15em;
+  line-height: 0;
+  opacity: .6;
+}
+</style>
diff --git a/src/components/error_window/error_window.vue b/src/components/error_window/error_window.vue
new file mode 100644
index 00000000..ddb4ba00
--- /dev/null
+++ b/src/components/error_window/error_window.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="error-window panel">
+    <div class="panel-heading">
+      <span class="title">
+        {{ $t('general.generic_error') }}
+      </span>
+    </div>
+    <div class="panel-body">
+      <p>
+        {{ $t('general.error_retry') }}
+      </p>
+      <button
+        class="btn"
+        @click="closeAllModals"
+      >
+        {{ $t('general.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeAllModals () {
+      // TODO make a global hook to close all modals?
+      this.$store.dispatch('closeSettingsModal')
+      this.$emit('resetAsyncComponent')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-window {
+  .btn {
+    margin: .5em;
+    padding: .5em 2em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index d38c5751..60d14649 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,9 +1,20 @@
 import Modal from 'src/components/modal/modal.vue'
+import BigSpinner from 'src/components/big_spinner/big_spinner.vue'
+import ErrorWindow from 'src/components/error_window/error_window.vue'
+import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 
 const SettingsModal = {
   components: {
     Modal,
-    SettingsModalContent: () => import('./settings_modal_content.vue')
+    SettingsModalContent: getResettableAsyncComponent(
+      () => import('./settings_modal_content.vue'),
+      {
+        loading: BigSpinner,
+        error: ErrorWindow,
+        delay: 0,
+        timeout: 3000
+      }
+    )
   },
   computed: {
     modalActivated () {