LaconicNetwork/vega-frontend-monorepo
3
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>
<div className="pre-loader">
<Loader forceTheme="light" />
<Loader forceTheme="light" preloader />
</div>
</>
);

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

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

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

@ -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% {

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

@ -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',