loader, news responsive

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+.env
 /node_modules
 /.pnp
 .pnp.js
@@ -12,7 +13,6 @@
 /build
 
 # misc
-.env
 .DS_Store
 .env.local
 .env.development.local

src/App.js

@@ -16,7 +16,7 @@ const App = () => (
       <Layout.Sider theme="dark" breakpoint="lg">
         <Navbar />
       </Layout.Sider>
-      <div style={{ padding: '30px' }}>
+      <div style={{ padding: '30px', margin: 'auto' }}>
         <Switch>
           <Route exact path="/">
             <Homepage />

src/components/Cryptocurrencies.jsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import millify from 'millify';
 import { Link } from 'react-router-dom';
-import { Card, Row, Col, Spin } from 'antd';
+import { Card, Row, Col } from 'antd';
 
 import { useGetCryptosQuery } from '../services/cryptoApi';
+import { Loader } from './Loader';
 
 export const Cryptocurrencies = ({ simplified }) => {
   const count = simplified ? 10 : 100;
   const { data: cryptosList } = useGetCryptosQuery(count);
 
-  if (!cryptosList?.data?.coins?.length) return <Spin />;
+  if (!cryptosList?.data?.coins?.length) return <Loader />;
 
   return (
     <>

src/components/Exchanges.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import millify from 'millify';
-import { Collapse, Spin, Row, Col, Typography, Avatar } from 'antd';
+import { Collapse, Row, Col, Typography, Avatar } from 'antd';
 import HTMLReactParser from 'html-react-parser';
 
 import { useGetExchangesQuery } from '../services/cryptoApi';
+import { Loader } from './Loader';
 
 const { Text } = Typography;
 const { Panel } = Collapse;
 
 export const Exchanges = () => {
-  const { data } = useGetExchangesQuery();
+  const { data, isFetching } = useGetExchangesQuery();
   const exchangesList = data?.data?.exchanges;
 
-  if (!exchangesList?.length) return <Spin />;
+  if (isFetching) return <Loader />;
 
   return (
     <>

src/components/Homepage.jsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import millify from 'millify';
-import { Spin, Typography, Row, Col, Statistic } from 'antd';
+import { Typography, Row, Col, Statistic } from 'antd';
 import { Link } from 'react-router-dom';
 
 import { useGetCryptosQuery } from '../services/cryptoApi';
 import { Cryptocurrencies } from './Cryptocurrencies';
 import { News } from './News';
+import { Loader } from './Loader';
 
 const { Title } = Typography;
 
 export const Homepage = () => {
   const { data, isFetching } = useGetCryptosQuery(10);
   const globalStats = data?.data?.stats;
 
-  if (isFetching) return <Spin />;
+  if (isFetching) return <Loader />;
 
   return (
     <>

src/components/Loader.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Spin } from 'antd';
+
+export const Loader = () => (
+  <>
+    <Spin style={{ height: '74vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }} />;
+  </>
+);

src/components/News.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
-import { Select, Spin, Typography, Row, Col, Image, Avatar, Card } from 'antd';
+import { Select, Typography, Row, Col, Avatar, Card } from 'antd';
 import moment from 'moment';
 
 import { useGetCryptosQuery } from '../services/cryptoApi';
 import { useGetCryptoNewsQuery } from '../services/cryptoNewsApi';
+import { Loader } from './Loader';
 
 const demoImage = 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F3eeb15d1-a70f-45cd-a02a-f4a21bf36674.png?fit=scale-down&source=next&width=700';
 
@@ -15,7 +16,7 @@ export const News = ({ simplified }) => {
   const { data } = useGetCryptosQuery(100);
   const { data: cryptoNews } = useGetCryptoNewsQuery({ newsCategory, count: simplified ? 6 : 12 });
 
-  if (!cryptoNews?.value) return <Spin />;
+  if (!cryptoNews?.value) return <Loader />;
 
   return (
     <Row gutter={[24, 24]}>
@@ -38,17 +39,17 @@ export const News = ({ simplified }) => {
       )}
       {cryptoNews.value.map((news, i) => (
         <Col xs={24} sm={12} lg={8}>
-          <Card key={i} hoverable style={{ height: '350px' }}>
+          <Card key={i} hoverable style={{ minHeight: '300px' }}>
             <a href={news.url} target="_blank" rel="noreferrer">
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <Title style={{ width: '70%' }} level={4}>{news.name}</Title>
-                <img style={{ maxWidth: '150px' }} src={news?.image?.thumbnail?.contentUrl || demoImage} alt="" />
+                <img style={{ width: '100px', height: '100px' }} src={news?.image?.thumbnail?.contentUrl || demoImage} alt="" />
               </div>
-              <p style={{ margin: '10px 0', color: 'black' }}>{news.description}</p>
+              <p style={{ margin: '10px 0', color: 'black' }}>{news.description.length > 100 ? `${news.description.substring(0, 100)}...` : news.description}</p>
               <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                 <div>
                   <Avatar src={news.provider[0]?.image?.thumbnail?.contentUrl || demoImage} alt="" />
-                  <Text>{news.provider[0]?.name}</Text>
+                  <Text style={{ marginLeft: '10px' }}>{news.provider[0]?.name}</Text>
                 </div>
                 <Text>{moment(news.datePublished).startOf('ss').fromNow()}</Text>
               </div>

src/components/cryptoDetails/CryptoDetails.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import HTMLReactParser from 'html-react-parser';
 import { useParams } from 'react-router-dom';
 import millify from 'millify';
-import { Col, Row, Spin, Typography } from 'antd';
+import { Col, Row, Typography } from 'antd';
 import { MoneyCollectOutlined, DollarCircleOutlined, FundOutlined, ExclamationCircleOutlined, StopOutlined, TrophyOutlined, CheckOutlined, StarOutlined, NumberOutlined, ThunderboltOutlined } from '@ant-design/icons';
 
 import './cryptoDetails.css';
 import { useGetCryptoDetailsQuery } from '../../services/cryptoApi';
+import { Loader } from '../Loader';
 
 const { Title, Text } = Typography;
 
@@ -15,8 +16,7 @@ export const CryptoDetails = () => {
   const { data, isFetching } = useGetCryptoDetailsQuery(coinId);
   const cryptoDetails = data?.data?.coin;
 
-  if (isFetching) return <Spin />;
-
+  if (isFetching) return <Loader />;
   return (
     <Col className="coin-detail-container">
       <Col className="coin-heading-container">