LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

chore(ui-toolkit): revert: loader no rerender version only

Browse Source
This commit is contained in:
Maciek 2023-02-27 16:51:50 +01:00 committed by GitHub
parent 4bb78e9891
commit a02100b079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 108 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
apps/static/src/assets/preloader.css
View File

@ -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;
}
}

2
apps/trading/components/preloader/preloader.tsx
View File

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

33
apps/trading/pages/gen-styles.scss
View File

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

146
apps/trading/public/preloader.css
View File

@ -5,10 +5,73 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.pre-loader .loader-item { .pre-loader .loader-item:nth-child(0) {
width: 10px; animation-delay: 0ms;
height: 10px; animation-direction: reverse;
background: #000; }
.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 { .pre-loader .pre-loader-center {
align-items: center; align-items: center;
@ -21,76 +84,11 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.loader-item:nth-child(0) { .pre-loader .loader-item {
animation-delay: 0ms; width: 10px;
animation-direction: reverse; height: 10px;
} background: #000;
.loader-item:first-child { animation: flickering 0.4s steps(2, jump-none) infinite alternate;
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 { @keyframes flickering {
0% { 0% {

21
libs/ui-toolkit/src/components/loader/loader.tsx
View File

@ -1,5 +1,5 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { useMemo } from 'react'; import { useEffect, useMemo, useState } from 'react';
const pseudoRandom = (seed: number) => { const pseudoRandom = (seed: number) => {
let value = seed; let value = seed;
@ -12,9 +12,26 @@ const pseudoRandom = (seed: number) => {
export interface LoaderProps { export interface LoaderProps {
size?: 'small' | 'large'; size?: 'small' | 'large';
forceTheme?: 'dark' | 'light'; 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', { const itemClasses = classNames('loader-item', {
'dark:bg-white bg-black': !forceTheme, 'dark:bg-white bg-black': !forceTheme,
'bg-white': forceTheme === 'dark', 'bg-white': forceTheme === 'dark',