diff --git a/src/App.jsx b/src/App.jsx
index 2d997e0..a5b6220 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import styled from 'styled-components'
-import Loading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
+import CryptoGalleryLoading from './components/CryptoGalleryLoading/CryptoGalleryLoading';
import {
BrowserRouter as Router,
@@ -10,6 +10,9 @@ 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 Cryptos from './components/CryptoGallery/CryptoGallery';
function App() {
@@ -19,6 +22,7 @@ function App() {
`
const [loading, setLoading] = useState(true)
+ const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
React.useEffect(() => {
@@ -46,7 +50,16 @@ function App() {
-
+
+
+
+
diff --git a/src/components/Background/Background.jsx b/src/components/Background/Background.jsx
index c2bef38..e4c9b31 100644
--- a/src/components/Background/Background.jsx
+++ b/src/components/Background/Background.jsx
@@ -151,34 +151,36 @@ const Background = ({loading}) => {
{
seriesOfPaths.map(serie => (
-
+
{
- pathsData.map((object, index) => (
-
- (
+
+
- ))
- }
-
-
- ))
-
+ key={index}
+ />
+ ))
+ }
+
+ ))
}
};
diff --git a/src/components/CryptoGallery/CryptoGallery.jsx b/src/components/CryptoGallery/CryptoGallery.jsx
index eccc349..b0af7a6 100644
--- a/src/components/CryptoGallery/CryptoGallery.jsx
+++ b/src/components/CryptoGallery/CryptoGallery.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Grid } from '@mui/material';
import styled from 'styled-components';
-import Crypto from './CryptoGalleryItem';
+import CryptoGalleryItem from './CryptoGalleryItem';
import moment from 'moment';
@@ -213,7 +213,7 @@ const Cryptos = ({setLoading, setLoadingURL, loading}) => {
{
cryptosList.map((crypto, index) => (
- {
index={index}
cryptoListLength={cryptosList.length}
+ loading={loading}
setLoading={setLoading}
/>
))
diff --git a/src/components/CryptoGallery/CryptoGalleryItem.jsx b/src/components/CryptoGallery/CryptoGalleryItem.jsx
index 32c6b01..13db807 100644
--- a/src/components/CryptoGallery/CryptoGalleryItem.jsx
+++ b/src/components/CryptoGallery/CryptoGalleryItem.jsx
@@ -9,7 +9,7 @@ import { borderRadius } from '@mui/system';
import { withRouter, useHistory } from 'react-router-dom';
-const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => {
+const CryptoGalleryItem = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading, loading}) => {
const history = useHistory()
@@ -49,7 +49,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt
lg={4}
md={6}
sm={12}
- onClick={() => history.push(`/crypto/${data.id}`)}
+ onClick={() => {if (!loading) history.push(`/crypto/${data.id}`)}}
+ style={{cursor: loading ? 'initial' : 'clicker'}}
>
{
-
- const [loadingURL, setLoadingURL] = useState('https://i.ibb.co/Dwygw0t/Logo-reduced.png')
+const CryptoGalleryLoading = ({loading, loadingURL}) => {
const LoadingStyles = styled.div`
@@ -74,17 +72,8 @@ const Loading = ({loading, setLoading}) => {
Loading
-
-
-
>
)
};
-export default Loading;
+export default CryptoGalleryLoading;