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

chore: loader no rerender version only, early resolving choosen theme

Browse Source
This commit is contained in:
maciek
2023-02-28 11:50:13 +01:00
parent e3b2ee12e6
commit ec89883dec
10 changed files with 161 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/static/src/assets/preloader.css
+35 -32
View File
@@ -21,75 +21,75 @@
display: flex;
flex-wrap: wrap;
}
.loader-item:nth-child(0) {
.pre-loader .loader-item:nth-child(0) {
animation-delay: 0ms;
animation-direction: reverse;
}
.loader-item:first-child {
animation-delay: -0.2s;
.pre-loader .loader-item:first-child {
animation-delay: -50ms;
animation-direction: alternate;
}
.loader-item:nth-child(2) {
.pre-loader .loader-item:nth-child(2) {
animation-delay: 0.2s;
animation-direction: reverse;
}
.pre-loader .loader-item:nth-child(3) {
animation-delay: -0.6s;
animation-direction: alternate;
}
.pre-loader .loader-item:nth-child(4) {
animation-delay: 0.4s;
animation-direction: reverse;
}
.loader-item:nth-child(3) {
animation-delay: -0.15s;
.pre-loader .loader-item:nth-child(5) {
animation-delay: -0.5s;
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) {
.pre-loader .loader-item:nth-child(6) {
animation-delay: 0.3s;
animation-direction: reverse;
}
.loader-item:nth-child(7) {
animation-delay: -0.35s;
.pre-loader .loader-item:nth-child(7) {
animation-delay: -1.4s;
animation-direction: alternate;
}
.loader-item:nth-child(8) {
.pre-loader .loader-item:nth-child(8) {
animation-delay: 2s;
animation-direction: reverse;
}
.loader-item:nth-child(9) {
animation-delay: -0.45s;
.pre-loader .loader-item:nth-child(9) {
animation-delay: -0.9s;
animation-direction: alternate;
}
.loader-item:nth-child(10) {
animation-delay: 2s;
.pre-loader .loader-item:nth-child(10) {
animation-delay: 1.5s;
animation-direction: reverse;
}
.loader-item:nth-child(11) {
.pre-loader .loader-item:nth-child(11) {
animation-delay: -0.55s;
animation-direction: alternate;
}
.loader-item:nth-child(12) {
.pre-loader .loader-item:nth-child(12) {
animation-delay: 1.2s;
animation-direction: reverse;
}
.loader-item:nth-child(13) {
animation-delay: -2.6s;
.pre-loader .loader-item:nth-child(13) {
animation-delay: -0.65s;
animation-direction: alternate;
}
.loader-item:nth-child(14) {
animation-delay: 2.8s;
.pre-loader .loader-item:nth-child(14) {
animation-delay: 0.7s;
animation-direction: reverse;
}
.loader-item:nth-child(15) {
animation-delay: -3s;
.pre-loader .loader-item:nth-child(15) {
animation-delay: -3.75s;
animation-direction: alternate;
}
.loader-item:nth-child(16) {
.pre-loader .loader-item:nth-child(16) {
animation-delay: 1.6s;
animation-direction: reverse;
}
.loader-item {
.pre-loader .loader-item {
animation: flickering 0.4s linear infinite alternate;
}
@keyframes flickering {
@@ -106,3 +106,6 @@
opacity: 0;
}
}
html.dark .pre-loader .loader-item {
background: #fff;
}
apps/static/src/assets/theme-setter.js
+9
View File
@@ -0,0 +1,9 @@
(function () {
var storedTheme = window.localStorage.getItem('theme');
if (
storedTheme === 'dark' ||
(!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
}
})();
apps/trading/components/preloader/preloader.tsx
+5 -1
View File
@@ -9,11 +9,15 @@ export const Preloader = () => {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
html.dark body{
background: #000;
}
`}
</style>
<div className="pre-loader">
<Loader forceTheme="light" />
<Loader />
</div>
</>
);
apps/trading/pages/_app.page.tsx
-1
View File
@@ -22,7 +22,6 @@ import {
useInitializeEnv,
} from '@vegaprotocol/environment';
import './styles.css';
import './gen-styles.scss';
import { useGlobalStore, usePageTitleStore } from '../stores';
import { Footer } from '../components/footer';
import { useMemo, useState } from 'react';
apps/trading/pages/_document.page.tsx
+2 -1
View File
@@ -19,12 +19,13 @@ export default function Document() {
type="image/x-icon"
href="https://static.vega.xyz/favicon.ico"
/>
<script src="/theme-setter.js" type="text/javascript" async />
{['1', 'true'].includes(process.env['NX_USE_ENV_OVERRIDES'] || '') ? (
/* eslint-disable-next-line @next/next/no-sync-scripts */
<script src="/assets/env-config.js" type="text/javascript" />
) : null}
</Head>
<body className="font-alpha">
<body className="font-alpha dark:bg-black dark:text-white">
<Main />
<NextScript />
</body>
apps/trading/pages/gen-styles.scss
+31 -24
View File
@@ -20,32 +20,39 @@
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;
@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 {
animation: flickering 0.4s linear alternate infinite;
}
@keyframes flickering {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.loader-item {
animation: flickering 0.4s linear alternate infinite;
}
@keyframes flickering {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
html.dark {
.pre-loader {
.loader-item {
background: white;
}
}
}
apps/trading/public/preloader.css
+40 -32
View File
@@ -21,75 +21,80 @@
display: flex;
flex-wrap: wrap;
}
.loader-item:nth-child(0) {
@media (prefers-color-scheme: light) {
.pre-loader .loader-item {
background: #000;
}
}
.pre-loader .loader-item:nth-child(0) {
animation-delay: 0ms;
animation-direction: reverse;
}
.loader-item:first-child {
animation-delay: -0.2s;
.pre-loader .loader-item:first-child {
animation-delay: -50ms;
animation-direction: alternate;
}
.loader-item:nth-child(2) {
.pre-loader .loader-item:nth-child(2) {
animation-delay: 0.2s;
animation-direction: reverse;
}
.pre-loader .loader-item:nth-child(3) {
animation-delay: -0.6s;
animation-direction: alternate;
}
.pre-loader .loader-item:nth-child(4) {
animation-delay: 0.4s;
animation-direction: reverse;
}
.loader-item:nth-child(3) {
animation-delay: -0.15s;
.pre-loader .loader-item:nth-child(5) {
animation-delay: -0.5s;
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) {
.pre-loader .loader-item:nth-child(6) {
animation-delay: 0.3s;
animation-direction: reverse;
}
.loader-item:nth-child(7) {
animation-delay: -0.35s;
.pre-loader .loader-item:nth-child(7) {
animation-delay: -1.4s;
animation-direction: alternate;
}
.loader-item:nth-child(8) {
.pre-loader .loader-item:nth-child(8) {
animation-delay: 2s;
animation-direction: reverse;
}
.loader-item:nth-child(9) {
animation-delay: -0.45s;
.pre-loader .loader-item:nth-child(9) {
animation-delay: -0.9s;
animation-direction: alternate;
}
.loader-item:nth-child(10) {
animation-delay: 2s;
.pre-loader .loader-item:nth-child(10) {
animation-delay: 1.5s;
animation-direction: reverse;
}
.loader-item:nth-child(11) {
.pre-loader .loader-item:nth-child(11) {
animation-delay: -0.55s;
animation-direction: alternate;
}
.loader-item:nth-child(12) {
.pre-loader .loader-item:nth-child(12) {
animation-delay: 1.2s;
animation-direction: reverse;
}
.loader-item:nth-child(13) {
animation-delay: -2.6s;
.pre-loader .loader-item:nth-child(13) {
animation-delay: -0.65s;
animation-direction: alternate;
}
.loader-item:nth-child(14) {
animation-delay: 2.8s;
.pre-loader .loader-item:nth-child(14) {
animation-delay: 0.7s;
animation-direction: reverse;
}
.loader-item:nth-child(15) {
animation-delay: -3s;
.pre-loader .loader-item:nth-child(15) {
animation-delay: -3.75s;
animation-direction: alternate;
}
.loader-item:nth-child(16) {
.pre-loader .loader-item:nth-child(16) {
animation-delay: 1.6s;
animation-direction: reverse;
}
.loader-item {
.pre-loader .loader-item {
animation: flickering 0.4s linear infinite alternate;
}
@keyframes flickering {
@@ -106,3 +111,6 @@
opacity: 0;
}
}
html.dark .pre-loader .loader-item {
background: #fff;
}
apps/trading/public/theme-setter.js
+9
View File
@@ -0,0 +1,9 @@
(function () {
var storedTheme = window.localStorage.getItem('theme');
if (
storedTheme === 'dark' ||
(!storedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
}
})();
libs/ui-toolkit/src/components/loader/loader.module.scss
+28
View File
@@ -0,0 +1,28 @@
@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 {
animation: flickering 0.4s linear alternate infinite;
}
@keyframes flickering {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
libs/ui-toolkit/src/components/loader/loader.tsx
+2 -1
View File
@@ -1,5 +1,6 @@
import classNames from 'classnames';
import { useMemo } from 'react';
import styles from './loader.module.scss';
const pseudoRandom = (seed: number) => {
let value = seed;
@@ -15,7 +16,7 @@ export interface LoaderProps {
}
export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
const itemClasses = classNames('loader-item', {
const itemClasses = classNames('loader-item', styles['loader-item'], {
'dark:bg-white bg-black': !forceTheme,
'bg-white': forceTheme === 'dark',
'bg-black': forceTheme === 'light',