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