From bfc6bb6a6e0069504e0f3064990bc7045f246755 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 14 Jun 2023 17:07:47 +0100
Subject: [PATCH] Add spinner while saving datasources

---
 .../data/datasource/[datasourceId]/index.svelte    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
index 166b4363df..949fff4edc 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
@@ -22,6 +22,7 @@
   import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte"
   import { API } from "api"
   import { DatasourceFeature } from "@budibase/types"
+  import Spinner from "components/common/Spinner.svelte"
 
   const querySchema = {
     name: {},
@@ -129,7 +130,12 @@
           cta
           on:click={saveDatasource}
         >
-          Save
+          <div class="save-button-content">
+            {#if loading}
+              <Spinner size="10">Save</Spinner>
+            {/if}
+            Save
+          </div>
         </Button>
       </div>
       <IntegrationConfigForm
@@ -225,4 +231,10 @@
     flex-direction: column;
     gap: var(--spacing-m);
   }
+
+  .save-button-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+  }
 </style>