refactor the placeholders

Author: medyo

src/App.css

@@ -876,6 +876,72 @@ Producthunt item
   }
 }
 
+@keyframes cardPlaceholderPulse {
+  0% {
+    opacity: .6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .6;
+  }
+}
+
+.cardPlaceholder {
+  padding: 16px 16px 24px 16px;
+  animation-duration: 1.5s;
+  animation-name: cardPlaceholderPulse;
+  animation-iteration-count: infinite;
+}
+.mediaCardPlaceholder {
+  display: flex;
+  flex-direction: row;
+}
+
+.cardPlaceholder .media {
+  width:  50px;
+  height: 50px;
+  margin-right: 16px;
+  background: var(--placeholder-background-color);
+  display: inline-block;
+}
+.cardPlaceholder .cardContent {
+  display: flex;
+  flex-direction: column;
+}
+.cardPlaceholder .cardUpvote {
+  margin-left: auto;
+  background: var(--placeholder-background-color);
+  width:  33px;
+  height: 44px;
+}
+.cardPlaceholder .line {
+  background: var(--placeholder-background-color);
+  display: block;
+  height: 17px;
+  border-radius: 4px;
+}
+.cardPlaceholder .smallLine {
+  margin-top: 8px;
+  background: var(--placeholder-background-color);
+  display: block;
+  height: 14px;
+  width: 90%;
+  border-radius: 4px;
+}
+.cardPlaceholder .details {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+}
+.cardPlaceholder .detail {
+  background: var(--placeholder-background-color);
+  height: 10px;
+  width: 73px;
+  margin-right: 16px;
+  border-radius: 4px;
+}
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
   .block {

src/cards/ProductHuntCard.js

@@ -1,6 +1,5 @@
 
 import React, { useEffect, useState, useContext } from 'react'
-import { SiProducthunt } from 'react-icons/si';
 import CardComponent from "../components/CardComponent";
 import ListComponent from "../components/ListComponent";
 import { BiCommentDetail } from "react-icons/bi"
@@ -9,6 +8,7 @@ import PreferencesContext from '../preferences/PreferencesContext'
 import CardLink from "../components/CardLink"
 import CardItemWithActions from '../components/CardItemWithActions'
 import producthuntApi from '../services/producthunt'
+import ProductHuntPlaceholder from '../components/ProductHuntPlaceholder'
 
 const ProductItem = ({ item, index, analyticsTag }) => {
 
@@ -78,6 +78,7 @@ function ProductHuntCard({ label, icon, analyticsTag, withAds }) {
       <ListComponent
         fetchData={fetchProducts}
         renderItem={renderItem}
+        placeholder={<ProductHuntPlaceholder />}
         refresh={refresh}
         withAds={withAds}
       />

src/components/ListComponent.js

@@ -3,7 +3,7 @@ import CarbonAd from './CarbonAd'
 import { trackException } from '../utils/Analytics'
 import Placeholder from './Placeholder'
 
-function ListComponent({ fetchData, refresh, renderItem, withAds }) {
+function ListComponent({ fetchData, refresh, renderItem, withAds, placeholder = <Placeholder /> }) {
   const [items, setItems] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
@@ -43,17 +43,17 @@ function ListComponent({ fetchData, refresh, renderItem, withAds }) {
     })
   }
 
-  function CustomPlaceholder() {
+  function Placeholders() {
     return (
       <>
         {[...Array(5)].map((x, i) => (
-          <Placeholder key={i} />
+          <span key={i}>{placeholder}</span>
         ))}
       </>
     )
   }
 
-  return <>{loading ? <CustomPlaceholder /> : renderItems()}</>
+  return <>{loading ? <Placeholders /> : renderItems()}</>
 }
 
 export default ListComponent

src/components/Placeholder.js

@@ -2,55 +2,13 @@ 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 className="cardPlaceholder">
+      <span className="line"></span>
+      <span className="smallLine" />
+      <div className="details">
+        <span className="detail" />
+        <span className="detail" style={{ width: '78px' }} />
+        <span className="detail" style={{ width: '78px' }} />
       </div>
     </div>
   )

src/components/ProductHuntPlaceholder.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+function ProductHuntPlaceholder() {
+  return (
+    <div className="cardPlaceholder mediaCardPlaceholder">
+      <span className="media" />
+      <div className="cardContent">
+        <span className="line" />
+        <span className="smallLine" />
+        <div className="details">
+          <span className="detail" />
+          <span className="detail" style={{ width: '120px' }} />
+        </div>
+      </div>
+      <div className="cardUpvote" />
+    </div>
+  )
+}
+
+export default ProductHuntPlaceholder

src/variables.css

@@ -49,18 +49,6 @@ html.dark {
   --placeholder-background-color: #1c2026;
 }
 
-@keyframes react-placeholder-pulse {
-  0% {
-    opacity: .6;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: .6;
-  }
-}
-
 html.light {
   --app-name-text-color: #253B53;
   --background-color: #EFF6FE;