Revert "chore(ui-toolkit): loader no rerender version only (#3011)"

This reverts commit 4bb78e9891.

apps/static/src/assets/preloader.css

@@ -1,108 +0,0 @@
-.pre-loader {
-  display: flex;
-  width: 100%;
-  min-height: 100vh;
-  justify-content: center;
-  align-items: center;
-}
-.pre-loader .loader-item {
-  width: 10px;
-  height: 10px;
-  background: #000;
-}
-.pre-loader .pre-loader-center {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-}
-.pre-loader .pre-loader-wrapper {
-  width: 50px;
-  height: 50px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.loader-item:nth-child(0) {
-  animation-delay: 0ms;
-  animation-direction: reverse;
-}
-.loader-item:first-child {
-  animation-delay: -0.2s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(2) {
-  animation-delay: 0.4s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(3) {
-  animation-delay: -0.15s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(4) {
-  animation-delay: 0.6s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(5) {
-  animation-delay: -1s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(6) {
-  animation-delay: 0.3s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(7) {
-  animation-delay: -0.35s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(8) {
-  animation-delay: 2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(9) {
-  animation-delay: -0.45s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(10) {
-  animation-delay: 2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(11) {
-  animation-delay: -0.55s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(12) {
-  animation-delay: 1.2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(13) {
-  animation-delay: -2.6s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(14) {
-  animation-delay: 2.8s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(15) {
-  animation-delay: -3s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(16) {
-  animation-delay: 1.6s;
-  animation-direction: reverse;
-}
-.loader-item {
-  animation: flickering 0.4s linear infinite alternate;
-}
-@keyframes flickering {
-  0% {
-    opacity: 1;
-  }
-  25% {
-    opacity: 1;
-  }
-  26% {
-    opacity: 0;
-  }
-  to {
-    opacity: 0;
-  }
-}

apps/trading/components/preloader/preloader.tsx

@@ -13,7 +13,7 @@ export const Preloader = () => {
         `}
       </style>
       <div className="pre-loader">
-        <Loader forceTheme="light" />
+        <Loader forceTheme="light" preloader />
       </div>
     </>
   );

apps/trading/pages/gen-styles.scss

@@ -4,10 +4,17 @@
   min-height: 100vh;
   justify-content: center;
   align-items: center;
-  .loader-item {
-    width: 10px;
-    height: 10px;
-    background: black;
+
+  @for $i from 0 through 16 {
+    .loader-item:nth-child(#{$i}) {
+      @if $i % 2 == 0 {
+        animation-delay: #{$i * 50 * random(5)}ms;
+        animation-direction: reverse;
+      } @else {
+        animation-delay: #{$i * -50 * random(5)}ms;
+        animation-direction: alternate;
+      }
+    }
   }
   .pre-loader-center {
     align-items: center;
@@ -20,21 +27,13 @@
     display: flex;
     flex-wrap: wrap;
   }
-}
-@for $i from 0 through 16 {
-  .loader-item:nth-child(#{$i}) {
-    @if $i % 2 == 0 {
-      animation-delay: #{$i * 50 * random(5)}ms;
-      animation-direction: reverse;
-    } @else {
-      animation-delay: #{$i * -50 * random(5)}ms;
-      animation-direction: alternate;
-    }
+  .loader-item {
+    width: 10px;
+    height: 10px;
+    background: black;
+    animation: flickering 0.4s steps(2, jump-none) alternate infinite;
   }
 }
-.loader-item {
-  animation: flickering 0.4s linear alternate infinite;
-}
 @keyframes flickering {
   0% {
     opacity: 1;

apps/trading/public/preloader.css

@@ -5,10 +5,73 @@
   justify-content: center;
   align-items: center;
 }
-.pre-loader .loader-item {
-  width: 10px;
-  height: 10px;
-  background: #000;
+.pre-loader .loader-item:nth-child(0) {
+  animation-delay: 0ms;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:first-child {
+  animation-delay: -0.2s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(2) {
+  animation-delay: 0.1s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(3) {
+  animation-delay: -0.15s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(4) {
+  animation-delay: 1s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(5) {
+  animation-delay: -0.25s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(6) {
+  animation-delay: 0.3s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(7) {
+  animation-delay: -1.05s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(8) {
+  animation-delay: 0.8s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(9) {
+  animation-delay: -0.9s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(10) {
+  animation-delay: 0.5s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(11) {
+  animation-delay: -2.75s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(12) {
+  animation-delay: 2.4s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(13) {
+  animation-delay: -0.65s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(14) {
+  animation-delay: 0.7s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(15) {
+  animation-delay: -3s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(16) {
+  animation-delay: 2.4s;
+  animation-direction: reverse;
 }
 .pre-loader .pre-loader-center {
   align-items: center;
@@ -21,76 +84,11 @@
   display: flex;
   flex-wrap: wrap;
 }
-.loader-item:nth-child(0) {
-  animation-delay: 0ms;
-  animation-direction: reverse;
-}
-.loader-item:first-child {
-  animation-delay: -0.2s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(2) {
-  animation-delay: 0.4s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(3) {
-  animation-delay: -0.15s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(4) {
-  animation-delay: 0.6s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(5) {
-  animation-delay: -1s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(6) {
-  animation-delay: 0.3s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(7) {
-  animation-delay: -0.35s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(8) {
-  animation-delay: 2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(9) {
-  animation-delay: -0.45s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(10) {
-  animation-delay: 2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(11) {
-  animation-delay: -0.55s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(12) {
-  animation-delay: 1.2s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(13) {
-  animation-delay: -2.6s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(14) {
-  animation-delay: 2.8s;
-  animation-direction: reverse;
-}
-.loader-item:nth-child(15) {
-  animation-delay: -3s;
-  animation-direction: alternate;
-}
-.loader-item:nth-child(16) {
-  animation-delay: 1.6s;
-  animation-direction: reverse;
-}
-.loader-item {
-  animation: flickering 0.4s linear infinite alternate;
+.pre-loader .loader-item {
+  width: 10px;
+  height: 10px;
+  background: #000;
+  animation: flickering 0.4s steps(2, jump-none) infinite alternate;
 }
 @keyframes flickering {
   0% {

libs/ui-toolkit/src/components/loader/loader.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 const pseudoRandom = (seed: number) => {
   let value = seed;
@@ -12,9 +12,26 @@ const pseudoRandom = (seed: number) => {
 export interface LoaderProps {
   size?: 'small' | 'large';
   forceTheme?: 'dark' | 'light';
+  preloader?: boolean;
 }
 
-export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
+export const Loader = ({
+  size = 'large',
+  forceTheme,
+  preloader,
+}: LoaderProps) => {
+  const [, forceRender] = useState(false);
+
+  useEffect(() => {
+    const interval = preloader
+      ? undefined
+      : setInterval(() => {
+          forceRender((x) => !x);
+        }, 100);
+
+    return () => clearInterval(interval);
+  }, [preloader]);
+
   const itemClasses = classNames('loader-item', {
     'dark:bg-white bg-black': !forceTheme,
     'bg-white': forceTheme === 'dark',