patch: update placeholder image logic

Signed-off-by: Raul Kele <[email protected]>
project-zot · Apr 3, 2023 · 089d790 · 089d790
1 parent 2f94cc3
commit 089d790
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx
@@ -1,5 +1,5 @@
 // react global
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 // utility
 import { api, endpoints } from '../../api';
@@ -154,7 +154,7 @@ const randomImage = () => {
 function RepoDetails() {
   const [repoDetailData, setRepoDetailData] = useState({});
   const [tags, setTags] = useState([]);
-
+  const placeholderImage = useRef(randomImage());
   const [isLoading, setIsLoading] = useState(true);
   const [selectedTab, setSelectedTab] = useState('Overview');
   // get url param from <Route here (i.e. image name)
@@ -261,7 +261,7 @@ function RepoDetails() {
                       image={
                           !isEmpty(repoDetailData?.logo)
                             ? `data:image/png;base64, ${repoDetailData?.logo}`
-                            : randomImage()
+                            : placeholderImage.current
                         }
                         alt="icon"
                       />

diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx
@@ -1,5 +1,5 @@
 // react global
-import React from 'react';
+import React, { useRef } from 'react';
 import { useNavigate, createSearchParams } from 'react-router-dom';
 
 // utility
@@ -104,6 +104,7 @@ const useStyles = makeStyles(() => ({
 function RepoCard(props) {
   const classes = useStyles();
   const navigate = useNavigate();
+  const placeholderImage = useRef(randomImage());
   const { name, vendor, platforms, description, downloads, isSigned, lastUpdated, logo, version, vulnerabilityData } =
     props;
 
@@ -166,7 +167,7 @@ function RepoCard(props) {
                     img: classes.avatar
                   }}
                   component="img"
-                  image={!isEmpty(logo) ? `data:image/png;base64, ${logo}` : randomImage()}
+                  image={!isEmpty(logo) ? `data:image/png;base64, ${logo}` : placeholderImage.current}
                   alt="icon"
                 />
                 <Tooltip title={name} placement="top">

diff --git a/src/components/Tag/TagDetails.jsx b/src/components/Tag/TagDetails.jsx
@@ -217,6 +217,7 @@ function TagDetails() {
   const [isLoading, setIsLoading] = useState(true);
   const [selectedTab, setSelectedTab] = useState('Layers');
   const [selectedPullTab, setSelectedPullTab] = useState('');
+  const placeholderImage = useRef(randomImage());
   const abortController = useMemo(() => new AbortController(), []);
   const mounted = useRef(false);
   const navigate = useNavigate();
@@ -331,7 +332,7 @@ function TagDetails() {
                         image={
                           !isEmpty(imageDetailData?.logo)
                             ? `data:image/  png;base64, ${imageDetailData?.logo}`
-                            : randomImage()
+                            : placeholderImage.current
                         }
                         alt="icon"
                       />