🪟 🎨 Add loading backdrop for sync catalog table (#15671)

Author: dizel852

airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.module.scss

@@ -0,0 +1,28 @@
+@use "../../scss/colors";
+
+%cover {
+  width: 100%;
+  height: 100%;
+}
+
+.loadingBackdropContainer {
+  @extend %cover;
+  position: relative;
+
+  .backdrop {
+    @extend %cover;
+    position: absolute;
+    background-color: colors.$white;
+    opacity: 0.6;
+    z-index: 1;
+  }
+
+  .spinnerContainer {
+    @extend %cover;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+}

airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+
+import { LoadingBackdrop } from "./LoadingBackdrop";
+
+describe("<LoadingBackdrop />", () => {
+  it("loading backdrop is active", () => {
+    const { getByTestId } = render(<LoadingBackdrop loading />);
+
+    expect(getByTestId("loading-backdrop")).toBeInTheDocument();
+  });
+
+  it("loading backdrop is not active", () => {
+    const { queryByTestId } = render(<LoadingBackdrop loading={false} />);
+
+    expect(queryByTestId("loading-backdrop")).toBeNull();
+  });
+});

airbyte-webapp/src/components/LoadingBackdrop/LoadingBackdrop.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import Spinner from "../Spinner/Spinner";
+import styles from "./LoadingBackdrop.module.scss";
+
+interface LoadingBackdropProps {
+  loading: boolean;
+  small?: boolean;
+}
+export const LoadingBackdrop: React.FC<LoadingBackdropProps> = ({ loading, small, children }) => {
+  return (
+    <div className={styles.loadingBackdropContainer}>
+      {loading && (
+        <>
+          <div className={styles.backdrop} data-testid="loading-backdrop" />
+          <div className={styles.spinnerContainer}>
+            <Spinner small={small} />
+          </div>
+        </>
+      )}
+      {children}
+    </div>
+  );
+};

airbyte-webapp/src/components/LoadingBackdrop/index.stories.tsx

@@ -0,0 +1,23 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { LoadingBackdrop } from "./LoadingBackdrop";
+
+export default {
+  title: "Ui/LoadingBackdrop",
+  component: LoadingBackdrop,
+  argTypes: {
+    loading: { type: "boolean", required: true },
+    small: { type: "boolean", required: false },
+  },
+} as ComponentMeta<typeof LoadingBackdrop>;
+
+const Template: ComponentStory<typeof LoadingBackdrop> = (args) => (
+  <div style={{ height: 200, width: 200, border: "1px solid blue" }}>
+    <LoadingBackdrop {...args}>
+      <div style={{ padding: 15 }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      </div>
+    </LoadingBackdrop>
+  </div>
+);
+export const Primary = Template.bind({});

airbyte-webapp/src/components/LoadingBackdrop/index.tsx

@@ -0,0 +1 @@
+export { LoadingBackdrop } from "./LoadingBackdrop";

airbyte-webapp/src/components/LoadingPage/LoadingPage.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
-import { Theme } from "theme";
+import styled from "styled-components";
 
 import Spinner from "components/Spinner";
 
@@ -17,13 +16,10 @@ const Container = styled.div<IProps>`
   align-items: center;
 `;
 
-const LoadingPage: React.FC<IProps> = ({ full }) => {
-  const theme = useTheme() as Theme;
-  return (
-    <Container full={full}>
-      <Spinner backgroundColor={theme.backgroundColor} />
-    </Container>
-  );
-};
+const LoadingPage: React.FC<IProps> = ({ full }) => (
+  <Container full={full}>
+    <Spinner />
+  </Container>
+);
 
 export default LoadingPage;

airbyte-webapp/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,23 @@
+@use "../../scss/colors";
+
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+.spinner {
+  width: 42px;
+  height: 42px;
+  border: 4px solid colors.$blue-100;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  animation: spin 1.5s linear 0s infinite;
+}
+
+.small {
+  width: 30px;
+  height: 30px;
+}

airbyte-webapp/src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+
+import Spinner from "./Spinner";
+
+describe("<Spinner />", () => {
+  it("should render without crash", () => {
+    const { asFragment } = render(<Spinner />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

airbyte-webapp/src/components/Spinner/Spinner.tsx

@@ -1,43 +1,14 @@
+import classnames from "classnames";
 import React from "react";
-import styled, { keyframes } from "styled-components";
 
-interface IProps {
-  backgroundColor?: string;
+import styles from "./Spinner.module.scss";
+
+interface SpinnerProps {
   small?: boolean;
 }
 
-export const SpinAnimation = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-
-const SpinnerWheel = styled.div<{ small?: boolean }>`
-  display: inline-block;
-  height: ${({ small }) => (small ? 30 : 42)}px;
-  width: ${({ small }) => (small ? 30 : 42)}px;
-  border-radius: 50%;
-  border: 4px solid ${({ theme }) => theme.primaryColor12};
-  position: relative;
-  animation: ${SpinAnimation} 1.5s linear 0s infinite;
-`;
-
-const BreakRec = styled.div<IProps>`
-  width: 13px;
-  height: 7px;
-  background: ${({ theme, backgroundColor }) => (backgroundColor ? backgroundColor : theme.whiteColor)};
-  top: -4px;
-  position: relative;
-  margin: 0 auto;
-`;
-
-const Spinner: React.FC<IProps> = ({ backgroundColor, small }) => (
-  <SpinnerWheel small={small}>
-    <BreakRec backgroundColor={backgroundColor} />
-  </SpinnerWheel>
+const Spinner: React.FC<SpinnerProps> = ({ small }) => (
+  <div className={classnames(styles.spinner, { [styles.small]: small })} />
 );
 
 export default Spinner;

airbyte-webapp/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Spinner /> should render without crash 1`] = `
+<DocumentFragment>
+  <div
+    class="spinner"
+  />
+</DocumentFragment>
+`;

airbyte-webapp/src/components/Spinner/index.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import SpinnerComponent from "./Spinner";
+
+export default {
+  title: "Ui/Spinner",
+  component: SpinnerComponent,
+  argTypes: {
+    small: { type: "boolean", required: false },
+  },
+} as ComponentMeta<typeof SpinnerComponent>;
+
+const Template: ComponentStory<typeof SpinnerComponent> = (args) => <SpinnerComponent {...args} />;
+
+export const Primary = Template.bind({});

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx

@@ -332,6 +332,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 destinationSupportedSyncModes={destDefinition.supportedDestinationSyncModes}
                 additionalControl={additionalSchemaControl}
                 component={SchemaField}
+                isSubmitting={isSubmitting}
                 mode={mode}
               />
             </StyledSection>

airbyte-webapp/src/views/Connection/ConnectionForm/components/SyncCatalogField.tsx

@@ -5,6 +5,7 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { CheckBox, H5 } from "components";
+import { LoadingBackdrop } from "components/LoadingBackdrop";
 import { Cell, Header } from "components/SimpleTableComponents";
 
 import { useConfig } from "config";
@@ -70,6 +71,7 @@ const LearnMoreLink = styled.a`
 interface SchemaViewProps extends FieldProps<SyncSchemaStream[]> {
   additionalControl?: React.ReactNode;
   destinationSupportedSyncModes: DestinationSyncMode[];
+  isSubmitting: boolean;
   mode?: ConnectionFormMode;
 }
 
@@ -172,6 +174,7 @@ const SyncCatalogField: React.FC<SchemaViewProps> = ({
   additionalControl,
   field,
   form,
+  isSubmitting,
   mode,
 }) => {
   const { value: streams, name: fieldName } = field;
@@ -209,7 +212,7 @@ const SyncCatalogField: React.FC<SchemaViewProps> = ({
 
   return (
     <BatchEditProvider nodes={streams} update={onChangeSchema}>
-      <div>
+      <LoadingBackdrop loading={isSubmitting}>
         <HeaderBlock>
           {mode !== "readonly" ? (
             <>
@@ -236,7 +239,7 @@ const SyncCatalogField: React.FC<SchemaViewProps> = ({
             mode={mode}
           />
         </TreeViewContainer>
-      </div>
+      </LoadingBackdrop>
     </BatchEditProvider>
   );
 };