Random chad on render

src/pages/grafana.js

@@ -11,10 +11,17 @@ import Orchestrator from "../components/orchestratorViewer";
 const Grafana = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
   const [redirectToHome, setRedirectToHome] = useState(false);
+  const [thisChad, setChad] = useState("");
+
   if (redirectToHome) {
     return <Navigate push to="/" />;
   }
 
+  if (thisChad == ""){
+    const randomChad = performance.now();
+    const chadSource = "https://nframe.nl/avatar.png?" + randomChad;
+    setChad(chadSource);
+  }
 
   return (
     <div className="stroke" >
@@ -37,11 +44,11 @@ const Grafana = (obj) => {
                   setRedirectToHome(true);
                 }}>
                   <div className="row">
-                    <img alt="" src="https://nframe.nl/avatar.png" width="80em" height="80em" />
+                    <img alt="" src={thisChad} width="80em" height="80em" />
                   </div>
                   <h2>Livepeer Orchestrator</h2>
                   <div className="row">
-                    <img alt="" src="https://nframe.nl/avatar.png" width="80em" height="80em" />
+                    <img alt="" src={thisChad + "1"} width="80em" height="80em" />
                   </div>
                 </div>
               </div>

src/pages/home.js

@@ -16,6 +16,8 @@ const Home = (obj) => {
   const [redirectToLPT, setRedirectToLPT] = useState(false);
   const [redirectToStats, setRedirectToStats] = useState(false);
   const [redirectToGraphs, setRedirectToGraphs] = useState(false);
+  const [thisChad, setChad] = useState("");
+  
   if (redirectToGrafana) {
     return <Navigate push to="/stake" />;
   }
@@ -35,6 +37,12 @@ const Home = (obj) => {
     totalVisitorCount = userstate.visitorStats.totalVisitorCount;
   }
 
+  if (thisChad == ""){
+    const randomChad = performance.now();
+    const chadSource = "https://nframe.nl/avatar.png?" + randomChad;
+    setChad(chadSource);
+  }
+
   return (
     <div className="stroke">
       <div className="verticalDivider" />
@@ -51,7 +59,7 @@ const Home = (obj) => {
           setRedirectToGrafana(true);
         }}>
           <div className="row">
-            <img alt="" src="https://nframe.nl/avatar.png" width="20em" height="20em" style={{ margin: 0 }} />
+            <img alt="" src={thisChad} width="20em" height="20em" style={{ margin: 0 }} />
             <p style={{ padding: '0.3em', flex: 1, flexGrow: 3 }}>Orchestrator</p>
           </div>
         </button>

src/pages/livepeer.js

@@ -22,6 +22,7 @@ const Livepeer = (obj) => {
   const [showFilter, setShowFilter] = useState(false);
   const [opened, setOpened] = useState(false);
   const [showSidebar, setShowSidebar] = useState(true);
+  const [thisChad, setChad] = useState("");
   console.log("Rendering Livepeer");
 
   useEffect(() => {
@@ -35,6 +36,7 @@ const Livepeer = (obj) => {
   if (redirectToHome) {
     return <Navigate push to="/" />;
   }
+  
 
   let thisOrchObj;
   let headerString;
@@ -45,6 +47,11 @@ const Livepeer = (obj) => {
     headerString = "Livepeer Orchestrator Explorer";
   }
 
+  if (thisChad == ""){
+    const randomChad = performance.now();
+    const chadSource = "https://nframe.nl/avatar.png?" + randomChad;
+    setChad(chadSource);
+  }
 
   return (
     <div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}>
@@ -54,7 +61,7 @@ const Livepeer = (obj) => {
             setRedirectToHome(true);
           }}>
             <div className="row">
-              <img alt="" src="https://nframe.nl/avatar.png" width="40em" height="40em" />
+              <img alt="" src={thisChad} width="40em" height="40em" />
             </div>
             <h1>🏠</h1>
           </button>