diff --git a/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss b/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss
new file mode 100644
index 000000000000..bb8f014fb00d
--- /dev/null
+++ b/airbyte-webapp/src/components/StatusIcon/CircleLoader.module.scss
@@ -0,0 +1,25 @@
+@use "../../scss/colors";
+
+@keyframes spinning {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.spinner {
+ animation: spinning 1000ms linear infinite normal forwards;
+}
+
+.centerDot {
+ fill: colors.$blue;
+}
+
+:export {
+ // Export colors to be used in SVG gradients
+ gradientStart: colors.$blue;
+ gradientStop: colors.$blue-transparent;
+}
diff --git a/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx b/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
index 49de2a314da7..f774995084d6 100644
--- a/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
+++ b/airbyte-webapp/src/components/StatusIcon/CircleLoader.tsx
@@ -1,65 +1,34 @@
-import styled, { keyframes } from "styled-components";
+import styles from "./CircleLoader.module.scss";
-const spinAnimation = keyframes`
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
-`;
-
-const SpinnerSVG = styled.svg`
- animation: ${spinAnimation} 1000ms linear infinite normal forwards;
-`;
-
-interface Props {
+interface CircleLoaderProps {
title?: string;
}
-const CircleLoader = ({ title }: Props): JSX.Element => (
-
+export const CircleLoader = ({ title }: CircleLoaderProps): JSX.Element => (
+
+
);
-
-export default CircleLoader;
diff --git a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
index 2da76601b8bd..80910eb63c09 100644
--- a/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
+++ b/airbyte-webapp/src/components/StatusIcon/StatusIcon.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
import { MoonIcon } from "components/icons/MoonIcon";
import PauseIcon from "../icons/PauseIcon";
-import CircleLoader from "./CircleLoader";
+import { CircleLoader } from "./CircleLoader";
export type StatusIconStatus = "sleep" | "inactive" | "success" | "warning" | "loading" | "error";
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
index a83d88e7e217..45ccd7d81603 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/FrequentlyUsedDestinations/__snapshots__/FrequentlyUsedDestinations.test.tsx.snap
@@ -74,7 +74,7 @@ exports[` should renders with mock data without cr
>
@@ -93,7 +93,7 @@ exports[` should renders with mock data without cr
class="container"
>
Alpha
@@ -125,7 +125,7 @@ exports[` should renders with mock data without cr
>
@@ -188,7 +188,7 @@ exports[` should renders with mock data without cr
>
@@ -230,7 +230,7 @@ exports[` should renders with mock data without cr
>
@@ -272,7 +272,7 @@ exports[` should renders with mock data without cr
>
@@ -291,7 +291,7 @@ exports[` should renders with mock data without cr
class="container"
>
Alpha
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
index 6555679b3e5a..c6e68f28119c 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/__snapshots__/StartWithDestination.test.tsx.snap
@@ -22,7 +22,7 @@ exports[` should renders without crash with provided pr
>
%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20363.6%20500%22%20enable-background%3D%22new%200%200%20363.6%20500%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%2300832D%22%20d%3D%22M238.6%2C0l125%2C125l-62.5%2C11.4L238.6%2C125l-11.4-62.5L238.6%2C0z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%2300AC47%22%20d%3D%22M238.6%2C125V0H34.1C15.3%2C0%2C0%2C15.3%2C0%2C34.1v431.8C0%2C484.7%2C15.3%2C500%2C34.1%2C500h295.5c18.8%2C0%2C34.1-15.3%2C34.1-34.1%0A%09%09V125H238.6z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M68.2%2C193.2V358h227.3V193.2H68.2z%20M167.6%2C329.5h-71v-39.8h71V329.5z%20M167.6%2C261.4h-71v-39.8h71V261.4z%0A%09%09%20M267%2C329.5h-71v-39.8h71V329.5z%20M267%2C261.4h-71v-39.8h71V261.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A)
@@ -93,7 +93,7 @@ exports[`%22%2F%3E%3Cpath%20clip-path%3D%22url(%23b)%22%20d%3D%22M119.229%2086.48L80.625%2047.874%2064%2043.425l-14.933%205.55L43.3%2064l4.637%2016.729%2040.938%2040.938%208.687-.386z%22%20opacity%3D%22.07%22%2F%3E%3Cg%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M64%2040.804c-12.81%200-23.195%2010.385-23.195%2023.196%200%2012.81%2010.385%2023.195%2023.195%2023.195S87.194%2076.81%2087.194%2064c0-12.811-10.385-23.196-23.194-23.196m0%2040.795c-9.72%200-17.6-7.88-17.6-17.6S54.28%2046.4%2064%2046.4%2081.6%2054.28%2081.6%2064%2073.72%2081.6%2064%2081.6%22%2F%3E%3Cpath%20d%3D%22M52.99%2063.104v7.21a12.794%2012.794%200%200%200%204.38%204.475V63.104zM61.675%2057.026v19.411c.745.137%201.507.22%202.29.22.714%200%201.41-.075%202.093-.189V57.026zM70.766%2066.1v8.562a12.786%2012.786%200%200%200%204.382-4.7v-3.861zM80.691%2078.287l-2.403%202.405a1.088%201.088%200%200%200%200%201.537l9.115%209.112a1.088%201.088%200%200%200%201.537%200l2.403-2.402a1.092%201.092%200%200%200%200-1.536l-9.116-9.116a1.09%201.09%200%200%200-1.536%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
@@ -188,7 +188,7 @@ exports[`
@@ -230,7 +230,7 @@ exports[`
@@ -272,7 +272,7 @@ exports[`
@@ -291,7 +291,7 @@ exports[`