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"
/>
{title}
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"
/>
💖
@@ -25,7 +26,7 @@ export default function HeroImage() {
}))
.filter(({ img, url }) => !!img && !!url)
.map(({ id, img, devName }) => (
-
+
))}
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())