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={}
>
Shard Collection
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={}
>
Unmanage collection
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={}
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={}
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={}
>
Cancel Request