Loading adjustments

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 (
     <Div>
-      <Loading />
+      <Loading loading={loading} setLoading={setLoading}/>
     </Div>
   );
 }

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 => (
                 <div className="paths" style={{top: serie * 520 + "px"}}>
                   {

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 {

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