Add an error when the server is unresponsive and does not return any error.

Author: alan-wu

src/components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
+    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -24,6 +25,7 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     FlatmapError: typeof import('./components/FlatmapError.vue')['default']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
     LegendItem: typeof import('./components/legends/LegendItem.vue')['default']

src/components/MultiFlatmapVuer.vue

@@ -166,7 +166,11 @@ export default {
         if (this.requireInitialisation) {
           //It has not been initialised yet
           this.requireInitialisation = false
-          fetch(this.flatmapAPI)
+          const controller = new AbortController();
+          const signal = controller.signal;
+          const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+          fetch(this.flatmapAPI, {signal})
             .then((response) => {
               if (!response.ok) {
                 // HTTP-level errors
@@ -278,6 +282,9 @@ export default {
                 other()
               })
             })
+            .finally(() => {
+              clearTimeout(timeoutId);
+            });
         } else if (this.initialised) {
           //resolve as it has been initialised
           resolve()