From 089d79087f0e4c5f964c766a7b1e1cdd481fab27 Mon Sep 17 00:00:00 2001
From: Raul Kele <raulkeleblk@gmail.com>
Date: Mon, 3 Apr 2023 10:47:25 +0300
Subject: [PATCH] patch: update placeholder image logic

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
---
 src/components/Repo/RepoDetails.jsx | 6 +++---
 src/components/Shared/RepoCard.jsx  | 5 +++--
 src/components/Tag/TagDetails.jsx   | 3 ++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx
index 94dcf78e..ac26b911 100644
--- 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
index 2641a308..26838f72 100644
--- 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
index e5f873e0..4d641ffe 100644
--- 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"
                       />