From e75ca464e1efc7b3d39470c0b36936cf3c59e27d Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Mon, 31 Jan 2022 13:19:01 -0300
Subject: [PATCH] Loading added

---
 src/App.jsx                              | 17 +----
 src/components/Background/Background.jsx |  5 +-
 src/components/Cryptos/Cryptos.jsx       |  8 ++-
 src/components/Loading/Loading.jsx       | 92 ++++++++++++++++++++++++
 4 files changed, 105 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Loading/Loading.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 6ffdef2..29c5a7a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ 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() {
  
@@ -12,8 +13,7 @@ function App() {
     
     /* height: 100%; */
 
-    background: rgb(46,66,105);
-    background: linear-gradient(180deg, #557ac5 0%, #004a86 100%);
+    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% );
     
     .paths {
 
@@ -42,21 +42,10 @@ function App() {
       }
   }`
 
-  const [loading, setLoading] = useState(true)
 
   return (
     <Div>
-      <Header />
-      {
-        !loading ? 
-        
-        <Background loading={loading}/>
-      : null
-      }
-
-      <Cryptos
-        setLoading={setLoading}
-      />
+      <Loading />
     </Div>
   );
 }
diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx
index 0fc1c23..600a0de 100644
--- a/src/components/Background/Background.jsx
+++ b/src/components/Background/Background.jsx
@@ -126,11 +126,12 @@ const Background = ({loading}) => {
     
     return <>
         {
+          loading ? null : 
             seriesOfPaths.map(serie => (
                 <div className="paths" style={{top: serie * 520 + "px"}}>
                   {
       
-                pathsData.map(object => (
+                pathsData.map((object, index) => (
                   
                   <CustomPath
                     className="path"
@@ -146,6 +147,8 @@ const Background = ({loading}) => {
                     transform={object.transform}
       
                     serieNumber={serie}
+
+                    key={index}
                   />
                 ))
               }
diff --git a/src/components/Cryptos/Cryptos.jsx b/src/components/Cryptos/Cryptos.jsx
index ffcb119..70650d7 100644
--- a/src/components/Cryptos/Cryptos.jsx
+++ b/src/components/Cryptos/Cryptos.jsx
@@ -5,11 +5,13 @@ import Crypto from './Crypto';
 
 import moment from 'moment';
 
-const Cryptos = ({setLoading}) => {
+const Cryptos = ({setLoading, setLoadingURL, loading}) => {
 
     const CryptosStyles = styled.div`
 
         position: relative;
+        
+        height: ${props => props.loading ? '1px' : 'auto'};
 
         z-index: 100;
 
@@ -51,7 +53,7 @@ const Cryptos = ({setLoading}) => {
             transition: 0.25s ease-in-out;
 
             :hover {
-                background: #00f7ff5e;
+                background: #1900ff61;
             }
 
             .line {
@@ -155,6 +157,8 @@ const Cryptos = ({setLoading}) => {
           
         await asyncForEach(data, async (object) => {
 
+            setLoadingURL(object.image)
+
             let requestData = await getCryptoPrices(object)
             console.log(requestData)
 
diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx
new file mode 100644
index 0000000..84aaff5
--- /dev/null
+++ b/src/components/Loading/Loading.jsx
@@ -0,0 +1,92 @@
+import {React, useState} from 'react';
+import styled from 'styled-components';
+import Background from '../Background/Background';
+import Cryptos from '../Cryptos/Cryptos';
+import Header from '../Header/Header';
+
+const Loading = () => {
+
+    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`
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        position: absolute;
+        
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        z-index: 10000;
+
+        background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(90,92,106,1) 0%, rgba(32,45,58,1) 81.3% );
+        
+        img {
+
+            width: 108px;
+
+            margin-bottom: 3vh;
+
+            animation: imgRotate 2s linear infinite;
+        }
+
+        h2 {
+
+            color: #fff;
+            font-family: "Raleway"
+        }
+
+        @keyframes imgRotate{
+            0% {
+                transform: rotate(0deg)
+            }
+            100% {
+                transform: rotate(360deg)
+            }
+        }
+
+        &.hidden {
+
+            animation: hiddeLoading 1.5s ease-in-out forwards;
+        }
+
+        @keyframes hiddeLoading {
+            0%, 50% {
+                transform: translate(0, 0%)
+            }
+            100% {
+                transform: translate(0, -100%)
+
+            }   
+        }
+    `
+
+    return (
+        <>
+            
+            <LoadingStyles className={loading ? null : 'hidden'}>
+                <img src={loadingURL} alt="loading" />
+                <h2>Loading</h2>
+            </LoadingStyles>
+            <Header />
+            <Background
+                loading={loading}
+            />
+            <Cryptos
+                loading={loading}
+                setLoading={setLoading}
+                setLoadingURL={setLoadingURL}
+            />
+        </>
+    )
+};
+
+export default Loading;