RG-2661 Replace the old loader with the new one

src/loader/loader.css

@@ -1,5 +1,13 @@
 @import '../global/variables.css';
 
+/* stylelint-disable color-no-hex */
+:root {
+  --ring-loader-color-1: #3bea62;
+  --ring-loader-color-2: #6b57ff;
+  --ring-loader-color-3: #07c3f2;
+}
+/* stylelint-enable */
+
 @keyframes rotation-keyframes {
   100% {
     transform: rotate(360deg);
@@ -14,6 +22,121 @@
   pointer-events: none;
 }
 
+.squares {
+  position: relative;
+
+  width: 60px;
+  height: 60px;
+}
+
+@keyframes square-animation {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    background: var(--ring-loader-color-1);
+  }
+
+  18.75% {
+    transform: rotate(182deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    background: var(--ring-loader-color-2);
+  }
+
+  25% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    background: var(--ring-loader-color-2);
+  }
+
+  43.75% {
+    transform: rotate(362deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    background: var(--ring-loader-color-1);
+  }
+
+  50% {
+    transform: rotate(360deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    background: var(--ring-loader-color-1);
+  }
+
+  68.75% {
+    transform: rotate(542deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    background: var(--ring-loader-color-3);
+  }
+
+  75% {
+    transform: rotate(540deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    background: var(--ring-loader-color-3);
+  }
+
+  93.75% {
+    transform: rotate(722deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    background: var(--ring-loader-color-1);
+  }
+
+  100% {
+    transform: rotate(720deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    background: var(--ring-loader-color-1);
+  }
+}
+
+.square {
+  position: absolute;
+
+  animation: square-animation 6.4s infinite;
+
+  border-radius: 20%;
+  background: var(--ring-loader-color-1);
+  mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+}
+
+.inner {
+  top: 20px;
+  left: 20px;
+
+  width: 20px;
+  height: 20px;
+
+}
+
+.middle {
+  top: 10px;
+  left: 10px;
+
+  width: 40px;
+  height: 40px;
+
+  animation-delay: 0.08s;
+
+  opacity: 0.8;
+}
+
+.outer {
+  top: 0;
+  left: 0;
+
+  width: 60px;
+  height: 60px;
+
+  animation-delay: 0.16s;
+
+  opacity: 0.7;
+}
+
 .animate {
   animation: rotation-keyframes 36s linear infinite;
 }

src/loader/loader.stories.tsx

@@ -1,17 +1,21 @@
-import {type StoryFn} from '@storybook/react-webpack5';
+import {type StoryFn, type StoryObj} from '@storybook/react-webpack5';
 
 import Loader, {type LoaderProps} from './loader';
 
 export default {
   title: 'Components/Loader',
 
   component: Loader,
-  parameters: {
-    screenshots: {skip: true},
-  },
 };
 
 export const basic: StoryFn<LoaderProps> = args => <Loader {...args} />;
 
 basic.storyName = 'Loader';
 basic.args = {message: 'Loading...'};
+basic.parameters = {
+  screenshots: {skip: true},
+};
+
+export const squares: StoryObj<LoaderProps> = {
+  args: {message: 'Loading...', squares: true},
+};

src/loader/loader.tsx

@@ -1,9 +1,20 @@
 import {type HTMLAttributes, PureComponent} from 'react';
+import classNames from 'classnames';
 
 import LoaderCore, {type LoaderCoreProps} from './loader-core';
+import styles from './loader.css';
+
+declare module 'csstype' {
+  interface Properties {
+    '--ring-loader-color-1'?: string;
+    '--ring-loader-color-2'?: string;
+    '--ring-loader-color-3'?: string;
+  }
+}
 
 export interface LoaderProps extends Partial<LoaderCoreProps>, HTMLAttributes<HTMLElement> {
   'data-test'?: string | null | undefined;
+  squares?: boolean; // TODO make default in 8.0
 }
 
 /**
@@ -35,8 +46,27 @@ export default class Loader extends PureComponent<LoaderProps> {
   };
 
   render() {
-    const {message, size, colors, 'data-test': dataTest, stop, deterministic, ...restProps} = this.props;
+    const {message, size, colors, 'data-test': dataTest, stop, deterministic, squares, ...restProps} = this.props;
 
-    return <div {...restProps} ref={this.initLoader} />;
+    return squares ? (
+      <>
+        <div
+          {...restProps}
+          className={classNames(styles.canvas, styles.squares)}
+          style={{
+            '--ring-loader-color-1': colors?.[0] ? `rgb(${colors[0].r}, ${colors[0].g}, ${colors[0].b})` : undefined,
+            '--ring-loader-color-2': colors?.[1] ? `rgb(${colors[1].r}, ${colors[1].g}, ${colors[1].b})` : undefined,
+            '--ring-loader-color-3': colors?.[2] ? `rgb(${colors[2].r}, ${colors[2].g}, ${colors[2].b})` : undefined,
+          }}
+        >
+          <div className={classNames(styles.square, styles.outer)} />
+          <div className={classNames(styles.square, styles.middle)} />
+          <div className={classNames(styles.square, styles.inner)} />
+        </div>
+        {message && <div className={styles.text}>{message}</div>}
+      </>
+    ) : (
+      <div {...restProps} ref={this.initLoader} />
+    );
   }
 }