From d6cf33e47828b5b9100aac4f892abcc695a364ca Mon Sep 17 00:00:00 2001
From: Paula Stachova <paula.stachova@mongodb.com>
Date: Mon, 28 Oct 2024 12:09:09 +0100
Subject: [PATCH] loaders

---
 .../src/components/create-shard-key-form.tsx                   | 2 ++
 .../src/components/states/shard-key-correct.tsx                | 2 ++
 .../src/components/states/shard-key-mismatch.tsx               | 2 ++
 .../src/components/states/sharding-error.tsx                   | 3 +++
 .../compass-global-writes/src/components/states/sharding.tsx   | 2 ++
 5 files changed, 11 insertions(+)

diff --git a/packages/compass-global-writes/src/components/create-shard-key-form.tsx b/packages/compass-global-writes/src/components/create-shard-key-form.tsx
index 24c2e16a780..19c801e7b1d 100644
--- a/packages/compass-global-writes/src/components/create-shard-key-form.tsx
+++ b/packages/compass-global-writes/src/components/create-shard-key-form.tsx
@@ -14,6 +14,7 @@ import {
   Radio,
   RadioGroup,
   spacing,
+  SpinLoader,
   Subtitle,
   TextInput,
 } from '@mongodb-js/compass-components';
@@ -305,6 +306,7 @@ export function CreateShardKeyForm({
             }
             variant="primary"
             isLoading={isSubmittingForSharding}
+            loadingIndicator={<SpinLoader />}
           >
             Shard Collection
           </Button>
diff --git a/packages/compass-global-writes/src/components/states/shard-key-correct.tsx b/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
index 8b24a3a5734..12e7f64f313 100644
--- a/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
+++ b/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
@@ -11,6 +11,7 @@ import {
   Label,
   Button,
   ButtonVariant,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import {
@@ -167,6 +168,7 @@ export function ShardKeyCorrect({
           onClick={onUnmanageNamespace}
           variant={ButtonVariant.Primary}
           isLoading={isUnmanagingNamespace}
+          loadingIndicator={<SpinLoader />}
         >
           Unmanage collection
         </Button>
diff --git a/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx b/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx
index ab69e8df621..33d3b87be2d 100644
--- a/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx
+++ b/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx
@@ -5,6 +5,7 @@ import {
   spacing,
   css,
   ButtonVariant,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import React from 'react';
 import ShardKeyMarkup from '../shard-key-markup';
@@ -69,6 +70,7 @@ export function ShardKeyMismatch({
             onClick={onUnmanageNamespace}
             variant={ButtonVariant.Default}
             isLoading={isUnmanagingNamespace}
+            loadingIndicator={<SpinLoader />}
             className={unmanageBtnStyles}
           >
             Unmanage collection
diff --git a/packages/compass-global-writes/src/components/states/sharding-error.tsx b/packages/compass-global-writes/src/components/states/sharding-error.tsx
index 1f546210248..a71c2d583b6 100644
--- a/packages/compass-global-writes/src/components/states/sharding-error.tsx
+++ b/packages/compass-global-writes/src/components/states/sharding-error.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   css,
   spacing,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import {
@@ -23,6 +24,7 @@ const btnStyles = css({
 const errorStyles = css({
   marginTop: spacing[200],
   whiteSpace: 'pre-wrap',
+  textAlign: 'left',
 });
 
 interface ShardingErrorProps {
@@ -49,6 +51,7 @@ export function ShardingError({
           data-testid="cancel-sharding-btn"
           disabled={isCancellingSharding || isSubmittingForSharding}
           isLoading={isCancellingSharding}
+          loadingIndicator={<SpinLoader />}
           onClick={onCancelSharding}
         >
           Cancel Request
diff --git a/packages/compass-global-writes/src/components/states/sharding.tsx b/packages/compass-global-writes/src/components/states/sharding.tsx
index 58aa9e280c6..914e3197080 100644
--- a/packages/compass-global-writes/src/components/states/sharding.tsx
+++ b/packages/compass-global-writes/src/components/states/sharding.tsx
@@ -7,6 +7,7 @@ import {
   css,
   Link,
   spacing,
+  SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 import {
@@ -42,6 +43,7 @@ export function ShardingState({
           data-testid="cancel-sharding-btn"
           onClick={onCancelSharding}
           isLoading={isCancellingSharding}
+          loadingIndicator={<SpinLoader />}
         >
           Cancel Request
         </Button>