From 75d51d09e2e4d22183d5bf9ce3aa57fd4e6af362 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 13 Feb 2024 17:06:21 +1100
Subject: [PATCH] feat: added SessionProgressBar

added copy for onboarding account loading
---
 _locales/en/messages.json                     |  4 +-
 .../loading/bar/SessionProgressBar.tsx        | 81 +++++++++++++++++++
 ts/components/loading/index.tsx               |  3 +-
 ts/types/LocalizerKeys.ts                     |  2 +
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 ts/components/loading/bar/SessionProgressBar.tsx

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e10d612da..4cc8d6071 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -577,5 +577,7 @@
   "resolution": "Resolution",
   "duration": "Duration",
   "notApplicable": "N/A",
-  "unknownError": "Unknown Error"
+  "unknownError": "Unknown Error",
+  "waitOneMoment": "One moment please...",
+  "loadAccountProgressMessage": "Loading your account"
 }
diff --git a/ts/components/loading/bar/SessionProgressBar.tsx b/ts/components/loading/bar/SessionProgressBar.tsx
new file mode 100644
index 000000000..d67fe6b9d
--- /dev/null
+++ b/ts/components/loading/bar/SessionProgressBar.tsx
@@ -0,0 +1,81 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import { Flex } from '../../basic/Flex';
+import { SpacerMD, SpacerXL } from '../../basic/Text';
+
+const ProgressContainer = styled.div<{ color: string }>`
+  background: ${({ color }) => color};
+  border-radius: 10px;
+  overflow: hidden;
+`;
+
+const Progress = styled(motion.div)<{ color: string }>`
+  background: ${({ color }) => color};
+  border-radius: 10px;
+  height: 17px;
+`;
+
+const StyledText = styled.span`
+  margin: 0;
+`;
+
+const StyledTitle = styled(StyledText)`
+  font-size: 26px;
+  font-weight: 700;
+`;
+
+type Props = {
+  /** a percentage value */
+  progress: number;
+  color?: string;
+  backgroundColor?: string;
+  margin?: string;
+  /** pixels is preferred */
+  width?: string;
+  title?: string;
+  subtitle?: string;
+  showPercentage?: boolean;
+};
+
+export function SessionProgressBar(props: Props) {
+  const {
+    progress,
+    width = '100%',
+    backgroundColor = 'var(--border-color)',
+    color = 'var(--primary-color)',
+    margin,
+    title,
+    subtitle,
+    showPercentage,
+  } = props;
+
+  return (
+    <Flex
+      container={true}
+      width={width}
+      flexDirection={'column'}
+      alignItems={'flex-start'}
+      margin={margin}
+    >
+      {title ? (
+        <>
+          <StyledTitle>{title}</StyledTitle>
+          <SpacerMD />
+        </>
+      ) : null}
+      <Flex container={true} width={width} justifyContent="space-between" alignItems="center">
+        {subtitle ? <StyledText>{subtitle}</StyledText> : null}
+        {showPercentage ? <StyledText>{progress}%</StyledText> : null}
+      </Flex>
+      {subtitle || showPercentage ? <SpacerXL /> : null}
+      <ProgressContainer color={backgroundColor} style={{ width }}>
+        <Progress
+          color={color}
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.5 }}
+        />
+      </ProgressContainer>
+    </Flex>
+  );
+}
diff --git a/ts/components/loading/index.tsx b/ts/components/loading/index.tsx
index b2fffa50d..0b43e72a8 100644
--- a/ts/components/loading/index.tsx
+++ b/ts/components/loading/index.tsx
@@ -1,4 +1,5 @@
+import { SessionProgressBar } from './bar/SessionProgressBar';
 import { SessionSpinner } from './spinner/SessionSpinner';
 import { Spinner } from './spinner/Spinner';
 
-export { SessionSpinner, Spinner };
+export { SessionProgressBar, SessionSpinner, Spinner };
diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts
index abbdadb23..04cbffa6c 100644
--- a/ts/types/LocalizerKeys.ts
+++ b/ts/types/LocalizerKeys.ts
@@ -276,6 +276,7 @@ export type LocalizerKeys =
   | 'linkPreviewsTitle'
   | 'linkVisitWarningMessage'
   | 'linkVisitWarningTitle'
+  | 'loadAccountProgressMessage'
   | 'loading'
   | 'mainMenuEdit'
   | 'mainMenuFile'
@@ -561,6 +562,7 @@ export type LocalizerKeys =
   | 'viewMenuZoomIn'
   | 'viewMenuZoomOut'
   | 'voiceMessage'
+  | 'waitOneMoment'
   | 'welcomeToYourSession'
   | 'windowMenuClose'
   | 'windowMenuMinimize'