feat(onboarding-ui): create LaunchingWorkspace page (#666)

* feat(onboarding-ui): create LaunchingWorkspace page

* feat(onboarding-ui): refactor to single responsibility LoaderPage

* feat(onboarding-ui): remove unused property

Author: PedroRorato

packages/onboarding-ui/src/pages/LoaderPage/LoaderPage.spec.tsx

@@ -0,0 +1,21 @@
+import ReactDOM from 'react-dom';
+
+import LoaderPage from './LoaderPage';
+
+const subtitles = [
+  'Bringing rocket to launch position',
+  'Loading rocket propellant',
+  'Performing final go/no go poll with flight crew',
+  'All systems nominal, switching to internal computer',
+  'Beginning countdown, 5...4...3...2...1',
+  'Transitioning to liftoff',
+];
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <LoaderPage title='Kapai' subtitles={subtitles} isReady={false} />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/onboarding-ui/src/pages/LoaderPage/LoaderPage.stories.tsx

@@ -0,0 +1,33 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import LoaderPage from './LoaderPage';
+
+const subtitles = [
+  'Bringing rocket to launch position1  🚀',
+  'Loading rocket propellant  🚀',
+  'Performing final go/no go poll with flight crew  🚀',
+  'All systems nominal, switching to internal computer  🚀',
+  'Beginning countdown, 5...4...3...2...1  🚀',
+  'Transitioning to liftoff  🚀',
+];
+
+type Args = ComponentProps<typeof LoaderPage>;
+
+export default {
+  title: 'pages/LoaderPage',
+  component: LoaderPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Launching Kapai...',
+    subtitles,
+    isReady: false,
+    loadingSeconds: 15,
+  },
+} as Meta<Args>;
+
+export const _LoaderPage: Story<Args> = (args) => <LoaderPage {...args} />;
+_LoaderPage.storyName = 'LoaderPage';

packages/onboarding-ui/src/pages/LoaderPage/LoaderPage.tsx

@@ -0,0 +1,70 @@
+import { Box, Margins, ProgressBar } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import { useEffect, useState } from 'react';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { OnboardingLogo } from '../../common/OnboardingLogo';
+
+type LoaderPageProps = {
+  title: string;
+  subtitles: string[];
+  isReady: boolean;
+  loadingSeconds?: number;
+};
+
+const LoaderPage = ({
+  title,
+  subtitles,
+  isReady = false,
+  loadingSeconds = 90,
+}: LoaderPageProps): ReactElement => {
+  const timeFraction = 100 / subtitles.length;
+
+  const [percentage, setPercentage] = useState(0);
+  const [subtitleIndex, setSubtitleIndex] = useState(0);
+
+  const progressHandler = () => {
+    const interval = (loadingSeconds * 1000) / 100;
+    setInterval(() => {
+      setPercentage((prev) => (prev === 99 ? 99 : prev + 1));
+    }, interval);
+  };
+
+  useEffect(() => {
+    if (isReady) setPercentage(100);
+    else progressHandler();
+  }, [isReady]);
+
+  useEffect(() => {
+    // Change subtitle according to percentage
+    const index = Math.floor(percentage / timeFraction);
+    if (index !== subtitleIndex) setSubtitleIndex(index);
+  }, [percentage]);
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={768}
+        paddingBlock={32}
+        paddingInline={16}
+      >
+        <Margins blockEnd={32}>
+          <OnboardingLogo />
+
+          <Box fontScale='hero'>{title}</Box>
+
+          <Box fontScale='p1b'>{subtitles[subtitleIndex]}</Box>
+
+          <ProgressBar barColor='#1D74F5' percentage={percentage} />
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default LoaderPage;

packages/onboarding-ui/src/pages/LoaderPage/index.ts

@@ -0,0 +1 @@
+export { default } from './LoaderPage';