Add progress bar (#9983)

* Add progress bar component

* Add progress bar for checking connections

* Add progress bar for discoveries schema

* Edit progress bar time

* Extract time to const

* Update text

Co-authored-by: Tim Roes <mail@timroes.de>

* Update airbyte-webapp/src/locales/en.json

Co-authored-by: Jared Rhizor <jared@dataline.io>

Co-authored-by: Tim Roes <mail@timroes.de>
Co-authored-by: Artem Astapenko <3767150+Jamakase@users.noreply.github.com>
Co-authored-by: Jared Rhizor <jared@dataline.io>

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

@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import Spinner from "components/Spinner";
+import { ProgressBar } from "components";
 
 const SpinnerBlock = styled.div`
   padding: 40px;
@@ -17,9 +17,12 @@ const FetchMessage = styled.div`
   white-space: pre-line;
 `;
 
+// Progress Bar runs 4min for discoveries schema
+const PROGRESS_BAR_TIME = 60 * 4;
+
 const LoadingSchema: React.FC = () => (
   <SpinnerBlock>
-    <Spinner />
+    <ProgressBar runTime={PROGRESS_BAR_TIME} />
     <FetchMessage>
       <FormattedMessage id="onboarding.fetchingSchema" />
     </FetchMessage>

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

@@ -0,0 +1,71 @@
+import React from "react";
+import styled, { keyframes } from "styled-components";
+import { FormattedMessage } from "react-intl";
+
+type ProgressBarProps = {
+  runTime?: number;
+  text?: React.ReactNode;
+};
+
+export const GrowAnimation = keyframes`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+`;
+export const fadeInAnimation = keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+const Bar = styled.div`
+  width: 100%;
+  max-width: 370px;
+  height: 19px;
+  border: 1px solid ${({ theme }) => theme.greyColor20};
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+`;
+
+const Progress = styled.div<{ runTime: number }>`
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => theme.primaryColor25};
+  animation: ${GrowAnimation} ${({ runTime }) => runTime}s linear 0s;
+`;
+
+const Text = styled.div<{ delay: number }>`
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  color: ${({ theme }) => theme.whiteColor};
+  font-size: 12px;
+  font-weight: bold;
+  animation: ${fadeInAnimation} 1s linear ${({ delay }) => delay + 0.5}s
+    forwards;
+  opacity: 0;
+`;
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ runTime, text }) => {
+  const animationRunTime = runTime || 20;
+  return (
+    <Bar>
+      <Progress runTime={animationRunTime} />
+      <Text delay={animationRunTime}>
+        {text || <FormattedMessage id="form.wait" />}
+      </Text>
+    </Bar>
+  );
+};
+
+export default ProgressBar;

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

@@ -0,0 +1,4 @@
+import ProgressBar from "./ProgressBar";
+
+export default ProgressBar;
+export { ProgressBar };

airbyte-webapp/src/components/index.tsx

@@ -18,3 +18,4 @@ export * from "./ContentCard";
 export * from "./ImageBlock";
 export * from "./LabeledRadioButton";
 export * from "./Modal";
+export * from "./ProgressBar";

airbyte-webapp/src/locales/en.json

@@ -102,6 +102,7 @@
   "form.pkSelected": "{count, plural, =0 { } one {{items}} other {# keys selected}}",
   "form.url.error": "field must be a valid URL",
   "form.setupGuide": "Setup Guide",
+  "form.wait": "Please wait a little bit more…",
 
   "connectionForm.validation.error": "The form is invalid. Please make sure that all fields are correct.",
   "connectionForm.normalization.title": "Normalization",

airbyte-webapp/src/views/Connector/ServiceForm/components/TestingConnectionSpinner.tsx

@@ -1,31 +1,22 @@
 import React from "react";
 import styled from "styled-components";
-import { FormattedMessage } from "react-intl";
 
-import { Spinner } from "components";
+import { ProgressBar } from "components";
 
 const LoadingContainer = styled.div`
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 17px;
-  color: ${({ theme }) => theme.darkPrimaryColor};
-  margin-top: 34px;
+  margin: 34px 0 9px;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
-const Loader = styled.div`
-  margin-right: 10px;
-`;
+// Progress Bar runs 2min for checking connections
+const PROGRESS_BAR_TIME = 60 * 2;
 
 const TestingConnectionSpinner: React.FC = () => {
   return (
     <LoadingContainer>
-      <Loader>
-        <Spinner />
-      </Loader>
-      <FormattedMessage id="form.testingConnection" />
+      <ProgressBar runTime={PROGRESS_BAR_TIME} />
     </LoadingContainer>
   );
 };