ui: Stop spinner in case of zone import error

ui/src/lib/locales/en.json

@@ -154,6 +154,7 @@
         "domain-access": "An error occurs when trying to access domain's list.",
         "domain-attach": "An error occurs when attaching the domain to happyDomain",
         "domain-have": "It appears you don't have any domain name registered on this provider.",
+        "domain-import": "An error occurs when trying to synchronize this domain:",
         "domain-list": "This provider doesn't permit to list existing domains. Use the form below to add one.",
         "error": "Error",
         "login": "Login error",

ui/src/lib/locales/fr.json

@@ -148,6 +148,7 @@
         "domain-access": "Une erreur s'est produite en essayant d'accéder à la liste des domaines.",
         "domain-attach": "Une erreur s'est produite lors de l'attachement du domaine à happyDomain",
         "domain-have": "Il semble que vous n'ayez pas de nom de domaine enregistré chez ce fournisseur.",
+        "domain-import": "Une erreur s'est produite lors de la synchronisation de ce domaine :",
         "domain-list": "Ce fournisseur ne permet pas de répertorier les domaines existants. Utilisez le formulaire ci-dessous pour en ajouter un.",
         "error": "Erreur",
         "login": "Erreur de connexion",

ui/src/routes/domains/[dn]/[[historyid]]/+layout.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+ import { tick } from 'svelte';
  import { goto } from '$app/navigation';
 
  // @ts-ignore
  import { escape } from 'html-escaper';
  import {
+     Alert,
      Button,
      ButtonGroup,
      Col,
@@ -42,6 +44,7 @@
 
  let selectedDomain = data.domain;
  $: if (selectedDomain != data.domain) {
+     main_error = null;
      goto('/domains/' + encodeURIComponent(selectedDomain));
  }
 
@@ -65,11 +68,14 @@
      }
  }
 
+ let main_error: string | null = null;
+
  let selectedHistory: string | undefined = data.history;
  $: if (!data.history && $domains_idx[selectedDomain] && $domains_idx[selectedDomain].zone_history && $domains_idx[selectedDomain].zone_history.length > 0) {
      selectedHistory = $domains_idx[selectedDomain].zone_history[0] as string;
  }
  $: if (selectedHistory && data.history != selectedHistory) {
+     main_error = null;
      goto('/domains/' + encodeURIComponent(selectedDomain) + '/' + encodeURIComponent(selectedHistory));
  }
 
@@ -93,6 +99,7 @@
      uploadInProgress = false;
      refreshDomains();
      selectedHistory = zm.id;
+     main_error = null;
  }
 
  async function getDomain(id: string): Promise<Domain> {
@@ -107,10 +114,14 @@
              retrieveZoneDone,
              (err: any) => {
                  retrievalInProgress = false;
-                 throw err;
+
+                 tick().then(() => {
+                     main_error = err.toString();
+                 });
              }
          )
      } else {
+         domain = null;
          getDomain($domains_idx[selectedDomain].id).then(
              (dn) => {
                  domain = dn;
@@ -430,7 +441,17 @@
             md={9}
             class="d-flex"
         >
-            {#if data.history == selectedHistory}
+            {#if main_error}
+                <div class="d-flex flex-column mt-3">
+                    <Alert
+                        color="danger"
+                        fade={false}
+                    >
+                        <strong>{$t('errors.domain-import')}</strong>
+                        {main_error}
+                    </Alert>
+                </div>
+            {:else if data.history == selectedHistory}
                 <slot />
             {:else}
                 <div class="mt-5 text-center flex-fill">