diff --git a/src/App.jsx b/src/App.jsx index 29c5a7a..73c698e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,6 @@ import React, { useState } from 'react' -import Header from "./components/Header/Header"; - import styled from 'styled-components' -import Cryptos from "./components/Cryptos/Cryptos"; -import Background from './components/Background/Background'; import Loading from './components/Loading/Loading'; function App() { @@ -42,10 +38,22 @@ function App() { } }` + const [loading, setLoading] = useState(true) + React.useEffect(() => { + + if (loading) { + + document.body.style.overflow = "hidden" + + } else { + + document.body.style.overflow = "visible" + } + }, [loading]) return (
- +
); } diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx index 600a0de..61a7ece 100644 --- a/src/components/Background/Background.jsx +++ b/src/components/Background/Background.jsx @@ -114,19 +114,14 @@ const Background = ({loading}) => { React.useEffect(() => { - if (loading) { + pathFunction() - return - } - - pathFunction() - - }, [loading]) + }, []) return <> { - loading ? null : + seriesOfPaths.map(serie => (
{ diff --git a/src/components/Cryptos/Cryptos.jsx b/src/components/Cryptos/Cryptos.jsx index 70650d7..c05b034 100644 --- a/src/components/Cryptos/Cryptos.jsx +++ b/src/components/Cryptos/Cryptos.jsx @@ -11,7 +11,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => { position: relative; - height: ${props => props.loading ? '1px' : 'auto'}; + /* height: ${props => props.loading ? '1px' : 'auto'}; */ z-index: 100; @@ -53,7 +53,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => { transition: 0.25s ease-in-out; :hover { - background: #1900ff61; + background: #21202950; } .line { diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx index 84aaff5..d28e889 100644 --- a/src/components/Loading/Loading.jsx +++ b/src/components/Loading/Loading.jsx @@ -4,11 +4,9 @@ import Background from '../Background/Background'; import Cryptos from '../Cryptos/Cryptos'; import Header from '../Header/Header'; -const Loading = () => { +const Loading = ({loading, setLoading}) => { - const [loading, setLoading] = useState(true) const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png') - const [loadingCryptoName, setLoadingCryptoName] = useState('') const LoadingStyles = styled.div` @@ -55,11 +53,11 @@ const Loading = () => { &.hidden { - animation: hiddeLoading 1.5s ease-in-out forwards; + animation: hiddeLoading 1s ease-in-out forwards; } @keyframes hiddeLoading { - 0%, 50% { + 0%{ transform: translate(0, 0%) } 100% {