Update image loading logic in FeedCard.js and FeedCardLoader.css, and…

… ListView.js
BumpyClock · Apr 11, 2024 · a1a11f1 · a1a11f1
1 parent 154c01d
commit a1a11f1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/components/FeedCard/FeedCard.js b/src/components/FeedCard/FeedCard.js
@@ -22,7 +22,7 @@ const useImageLoader = (src) => {
      // console.log("🚀 ~ useEffect ~ src:", src)
       const img = new Image();
       // Use the image proxy if src exists
-      img.src = `https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:600:300:0/g:no/plain/${encodeURIComponent(src)}@webp`;
+      img.src = `https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:0:300:0/g:no/plain/${encodeURIComponent(src)}@webp`;
 
       //console.log("🚀 ~ useEffect ~ src:", img.src)
       const link = document.createElement('link');

diff --git a/src/components/FeedCardLoader/FeedCardLoader.css b/src/components/FeedCardLoader/FeedCardLoader.css
@@ -2,11 +2,13 @@
     width: 100%;
     height: 200px;
     background: var(--color);
-    opacity:.4;
+    opacity:.2;
     background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
     background-repeat: no-repeat;
     background-size: 800px 200px;
     animation: shimmer .5s ease-in-out infinite forwards !important;
+    border-radius: 4px;
+    top:0;
 }
 
 @keyframes shimmer {

diff --git a/src/components/ListView/ListView.js b/src/components/ListView/ListView.js
@@ -55,9 +55,12 @@ const ListView = ({ articles }) => {
                         className={`article-item ${selectedArticle === article ? 'selected' : ''}`}
                     >
                        {article.thumbnail ? (
-    <div className="image-container">
-        <img src={article.thumbnail} alt={article.title} />
-    </div>
+  <div className="image-container">
+    <img 
+      src={`https://digests-imgproxy-a4crwf5b7a-uw.a.run.app/unsafe/rs:fit:200:200:0/g:no/plain/${encodeURIComponent(article.thumbnail)}@webp`} 
+      alt={article.title} 
+    />
+  </div>
 ) : null}
                         <div className="info-container">
                         <WebsiteInfo