From 0a8f9657d193ea0d6df62bd1909679a6bf6331fc Mon Sep 17 00:00:00 2001
From: Sanjaiyan Parthipan <parthipankalayini@gmail.com>
Date: Sat, 28 Oct 2023 02:57:22 +0530
Subject: [PATCH] =?UTF-8?q?Performance=20and=20Loading=20Speed=20Enhanceme?=
 =?UTF-8?q?nts=20for=20the=20Website=20=F0=9F=8F=8E=20(#652)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/components/DeviceCard/index.tsx   | 1 +
 website/src/components/HeroImage/index.tsx    | 3 ++-
 website/src/components/KeyGenerator/index.tsx | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/website/src/components/DeviceCard/index.tsx b/website/src/components/DeviceCard/index.tsx
index 13c316401d..e08ecd03cb 100644
--- a/website/src/components/DeviceCard/index.tsx
+++ b/website/src/components/DeviceCard/index.tsx
@@ -17,6 +17,7 @@ export default function DeviceCard(props: {
                 className={`avatar__photo-link avatar__photo avatar__photo--xl ${styles.device__photo}`}
                 alt={imageAlt || `photograph of ${title}`}
                 src={image}
+                decoding="async"
             />
             <div className="avatar__intro">
                 <div className="avatar__name">{title}</div>
diff --git a/website/src/components/HeroImage/index.tsx b/website/src/components/HeroImage/index.tsx
index 6f4a778d67..3bf1ef1ca3 100644
--- a/website/src/components/HeroImage/index.tsx
+++ b/website/src/components/HeroImage/index.tsx
@@ -12,6 +12,7 @@ export default function HeroImage() {
                     loading="lazy"
                     src={hero}
                     alt="screenshot of the visual studio integration"
+                    decoding="async"
                 />
             </div>
             <div className={styles["mid-grid"]}>💖</div>
@@ -25,7 +26,7 @@ export default function HeroImage() {
                     }))
                     .filter(({ img, url }) => !!img && !!url)
                     .map(({ id, img, devName }) => (
-                        <img key={id} src={img} alt={devName} title={devName} />
+                        <img key={id} src={img} alt={devName} title={devName} decoding="async" />
                     ))}
             </div>
         </div>
diff --git a/website/src/components/KeyGenerator/index.tsx b/website/src/components/KeyGenerator/index.tsx
index dcb0dd23ee..b54f275f0b 100644
--- a/website/src/components/KeyGenerator/index.tsx
+++ b/website/src/components/KeyGenerator/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useCallback } from "react"
 
 function toHex(bytes: Uint8Array) {
     let r = ""
@@ -9,14 +9,14 @@ function toHex(bytes: Uint8Array) {
 }
 
 export default function KeyGenerator() {
-    const compute = () => {
+    const compute = useCallback(() => {
         if (typeof window === "undefined")
             return "00000000000000000000000000000000"
 
         const array = new Uint8Array(32) // Create a Uint8Array with 32 elements.
         window.crypto.getRandomValues(array) // Fill the array with cryptographically strong random values.
         return toHex(array)
-    }
+    }, [])
 
     const [value, setValue] = useState(compute())