loaders

Author: paula-stacho

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>

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>

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

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

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>