RG-2661 Replace the old loader with the new one

src/button/button.stories.tsx

@@ -3,7 +3,8 @@ import pencilIcon from '@jetbrains/icons/pencil';
 import pencil12pxIcon from '@jetbrains/icons/pencil-12px';
 import hourglassIcon from '@jetbrains/icons/hourglass';
 
-import Loader from '../loader-inline/loader-inline';
+import Loader from '../loader/loader';
+import LoaderInline from '../loader-inline/loader-inline';
 import {ControlsHeight, ControlsHeightContext} from '../global/controls-height';
 import {Col, Grid} from '../grid/grid';
 import Row from '../grid/row';
@@ -138,7 +139,12 @@ export const longAction = () => {
             Sleep
           </Button>
           <Button title='Sleep' loader={loading} icon={hourglassIcon} onClick={this.load} />
-          {loading && <Loader />}
+          {loading && (
+            <>
+              <LoaderInline />
+              <Loader squares />
+            </>
+          )}
         </Fragment>
       );
     }

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,147 @@
   pointer-events: none;
 }
 
+.squares {
+  position: relative;
+
+  width: 60px;
+  height: 60px;
+}
+
+@keyframes square-animation-main {
+  0% {
+    transform: rotate(0deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+
+  37.5% {
+    transform: rotate(182deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+  }
+
+  50% {
+    transform: rotate(180deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+
+  87.5% {
+    transform: rotate(362deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+  }
+
+  100% {
+    transform: rotate(360deg);
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+  }
+}
+
+@keyframes square-animation-pseudo {
+  0% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 0;
+  }
+
+  18.75% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    opacity: 1;
+  }
+
+  25% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 1;
+  }
+
+  43.75% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0.657, 1);
+
+    opacity: 0;
+  }
+
+  100% {
+    animation-timing-function: cubic-bezier(0.333, 0, 0, 1);
+
+    opacity: 0;
+  }
+}
+
+.square {
+  animation: square-animation-main 3.2s infinite;
+
+  background: var(--ring-loader-color-1);
+  mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+
+  &,
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: 20%;
+  }
+
+  &::before {
+    content: '';
+    animation: square-animation-pseudo 6.4s infinite;
+
+    opacity: 0;
+
+    background: var(--ring-loader-color-2);
+  }
+
+  &::after {
+    content: '';
+    animation: square-animation-pseudo 6.4s 3.2s infinite;
+
+    opacity: 0;
+
+    background: var(--ring-loader-color-3);
+  }
+}
+
+.inner {
+  top: 20px;
+  right: 20px;
+  bottom: 20px;
+  left: 20px;
+}
+
+.middle {
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+
+  opacity: 0.8;
+
+  &,
+  &::before {
+    animation-delay: 0.08s;
+  }
+
+  &::after {
+    animation-delay: 3.28s;
+  }
+}
+
+.outer {
+  opacity: 0.7;
+
+  &,
+  &::before {
+    animation-delay: 0.16s;
+  }
+
+  &::after {
+    animation-delay: 3.36s;
+  }
+}
+
 .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,26 @@ 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}>
+        <div
+          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>
+    ) : (
+      <div {...restProps} ref={this.initLoader} />
+    );
   }
 }