Bug fix

src/App.jsx

@@ -10,9 +10,8 @@ import {
   Link
 } from "react-router-dom";
 import Crypto from './components/Crypto/Crypto';
-import Header from './components/Header/Header';
+
-import Background from './components/Background/Background';
+import CryptoGalleryContainer from './components/CryptoGallery/CryptoGalleryContainer'
-import Cryptos from './components/CryptoGallery/CryptoGallery';
 
 function App() {
  
@@ -21,25 +20,8 @@ function App() {
     background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,  rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );  
   `
 
-  const [loading, setLoading] = useState(true)
+  const setLoadingURL = () => {}
-  const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
+  const loadingURL = () => {}
-
-  React.useEffect(() => {
-
-    if (loading) {
-
-      document.body.style.overflow = "hidden"
-    
-    } else {
-
-      setTimeout(() => {
-        
-        document.body.style.overflow = "visible"
-      
-      }, 2000);
-      
-    } //https://stackoverflow.com/questions/39962757/prevent-scrolling-using-css-on-react-rendered-components
-  }, [loading])
 
   return (
     <GlobalStyles>
@@ -50,16 +32,7 @@ function App() {
           <Crypto />
         </Route>
         <Route path="/">
-          <CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
+          <CryptoGalleryContainer />
-          <Header />
-            <Background
-                loading={loading}
-            />
-            <Cryptos
-                loading={loading}
-                setLoading={setLoading}
-                setLoadingURL={setLoadingURL}
-            />
         </Route>
       </Switch>
     </Router>

src/components/CryptoGallery/CryptoGallery.jsx

@@ -5,7 +5,7 @@ import CryptoGalleryItem from './CryptoGalleryItem';
 
 import moment from 'moment';
 
-const Cryptos = ({setLoading, setLoadingURL, loading}) => {
+const CryptoGallery = ({setLoading, setLoadingURL, loading}) => {
 
     const CryptosStyles = styled.div`
 
@@ -243,4 +243,4 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
         );
 };
 
-export default Cryptos;
+export default CryptoGallery;

src/components/CryptoGallery/CryptoGalleryContainer.jsx

@@ -0,0 +1,46 @@
+import React, {useState} from 'react';
+import Background from '../Background/Background';
+import CryptoGalleryLoading from '../CryptoGalleryLoading/CryptoGalleryLoading';
+import Header from '../Header/Header';
+import CryptoGallery from './CryptoGallery';
+
+const CryptoGalleryContainer = () => {
+
+
+    const [loading, setLoading] = useState(true)
+    const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
+
+    React.useEffect(() => {
+
+        if (loading) {
+    
+          document.body.style.overflow = "hidden"
+        
+        } else {
+    
+          setTimeout(() => {
+            
+            document.body.style.overflow = "visible"
+          
+          }, 2000);
+          
+        } //https://stackoverflow.com/questions/39962757/prevent-scrolling-using-css-on-react-rendered-components
+      }, [loading])
+    
+    return (
+        <>
+            <CryptoGalleryLoading loading={loading} loadingURL={loadingURL} setLoading={setLoading}/>
+            <Header />
+            <Background
+                loading={loading}
+            />
+            <CryptoGallery
+                loading={loading}
+                setLoading={setLoading}
+                setLoadingURL={setLoadingURL}
+            />
+        </>
+    )
+};
+
+export default CryptoGalleryContainer;