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 a853fcea0c..166b4363df 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
@@ -33,6 +33,7 @@
   let isValid = true
   let integration, baseDatasource, datasource
   let queryList
+  let loading = false
 
   $: baseDatasource = $datasources.selected
   $: queryList = $queries.list.filter(
@@ -65,9 +66,11 @@
   }
 
   const saveDatasource = async () => {
+    loading = true
     if (integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
       const valid = await validateConfig()
       if (!valid) {
+        loading = false
         return false
       }
     }
@@ -82,6 +85,8 @@
       baseDatasource = cloneDeep(datasource)
     } catch (err) {
       notifications.error(`Error saving datasource: ${err}`)
+    } finally {
+      loading = false
     }
   }
 
@@ -119,7 +124,11 @@
       <Divider />
       <div class="config-header">
         <Heading size="S">Configuration</Heading>
-        <Button disabled={!changed || !isValid} cta on:click={saveDatasource}>
+        <Button
+          disabled={!changed || !isValid || loading}
+          cta
+          on:click={saveDatasource}
+        >
           Save
         </Button>
       </div>