show placeholders while loading cards data

Author: medyo

src/components/ListComponent.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import BeatLoader from "react-spinners/BeatLoader";
+import React, { useState, useEffect } from 'react'
 import CarbonAd from './CarbonAd'
 import { trackException } from '../utils/Analytics'
+import Placeholder from './Placeholder'
 
 function ListComponent({ fetchData, refresh, renderItem, withAds }) {
   const [items, setItems] = useState([])
@@ -43,17 +43,17 @@ function ListComponent({ fetchData, refresh, renderItem, withAds }) {
     })
   }
 
-  return (
-    <>
-      {loading ? (
-        <div className="cardLoading">
-          <BeatLoader color={'#A9B2BD'} loading={loading} size={15} className="loading" />
-        </div>
-      ) : (
-        renderItems()
-      )}
-    </>
-  )
+  function CustomPlaceholder() {
+    return (
+      <>
+        {[...Array(5)].map((x, i) => (
+          <Placeholder key={i} />
+        ))}
+      </>
+    )
+  }
+
+  return <>{loading ? <CustomPlaceholder /> : renderItems()}</>
 }
 
 export default ListComponent

src/components/Placeholder.js

@@ -0,0 +1,59 @@
+import React from 'react'
+
+function Placeholder() {
+  return (
+    <div
+      style={{
+        padding: '16px 16px 24px 16px',
+        animation: 'react-placeholder-pulse 1.5s infinite',
+      }}>
+      <span
+        style={{
+          background: 'var(--placeholder-background-color)',
+          display: 'block',
+          height: '17px',
+        }}></span>
+      <span
+        style={{
+          marginTop: '8px',
+          background: 'var(--placeholder-background-color)',
+          display: 'block',
+          height: '14px',
+          width: '90%',
+        }}
+      />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          marginTop: '10px',
+        }}>
+        <span
+          style={{
+            background: 'var(--placeholder-background-color)',
+            height: '10px',
+            width: '73px',
+            marginRight: '16px',
+          }}
+        />
+        <span
+          style={{
+            background: 'var(--placeholder-background-color)',
+            height: '10px',
+            width: '78px',
+            marginRight: '16px',
+          }}
+        />
+        <span
+          style={{
+            background: 'var(--placeholder-background-color)',
+            height: '10px',
+            width: '78px',
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default Placeholder

src/variables.css

@@ -45,6 +45,20 @@ html.dark {
   --tooltip-text-color: #FFF;
   --tooltip-shadow-color: #000000;
   --tooltip-accent-color: #0366D6;
+
+  --placeholder-background-color: #1c2026;
+}
+
+@keyframes react-placeholder-pulse {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .6;
+  }
 }
 
 html.light {
@@ -93,4 +107,7 @@ html.light {
   --tooltip-text-color: #3C5065;
   --tooltip-shadow-color: #dee4ec;
   --tooltip-accent-color: #0366D6;
+
+  --placeholder-background-color: #e7eff7;
+
 }