From 3fd6756201d382a275500f5a758c06095ae1c235 Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Sat, 21 Jun 2025 14:23:26 -0500
Subject: [PATCH] refactor(web); align ThemeImage with next.js docs

---
 .../footer/collinmbarrett-link/index.tsx      |  4 +--
 .../components/footer/github-link/index.tsx   |  4 +--
 web/src/components/header/index.tsx           |  4 +--
 web/src/components/image-themed.tsx           | 33 -----------------
 web/src/components/theme-image.tsx            | 36 +++++++++++++++++++
 5 files changed, 42 insertions(+), 39 deletions(-)
 delete mode 100644 web/src/components/image-themed.tsx
 create mode 100644 web/src/components/theme-image.tsx

diff --git a/web/src/components/footer/collinmbarrett-link/index.tsx b/web/src/components/footer/collinmbarrett-link/index.tsx
index be6ccd716..0393d301b 100644
--- a/web/src/components/footer/collinmbarrett-link/index.tsx
+++ b/web/src/components/footer/collinmbarrett-link/index.tsx
@@ -1,6 +1,6 @@
 import CollinMBarrettIconLight from "./collinmbarrett-icon-light.png";
 import CollinMBarrettIconDark from "./collinmbarrett-icon-dark.png";
-import { ImageThemed } from "@/components/image-themed";
+import { ThemeImage } from "@/components/theme-image";
 
 export function CollinMBarrettLink() {
   return (
@@ -10,7 +10,7 @@ export function CollinMBarrettLink() {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <ImageThemed
+      <ThemeImage
         aria-hidden
         srcLight={CollinMBarrettIconLight}
         srcDark={CollinMBarrettIconDark}
diff --git a/web/src/components/footer/github-link/index.tsx b/web/src/components/footer/github-link/index.tsx
index a0a58f172..de9730920 100644
--- a/web/src/components/footer/github-link/index.tsx
+++ b/web/src/components/footer/github-link/index.tsx
@@ -1,6 +1,6 @@
 import GitHubMarkLight from "./github-mark-light.svg";
 import GitHubMarkDark from "./github-mark-dark.svg";
-import { ImageThemed } from "@/components/image-themed";
+import { ThemeImage } from "@/components/theme-image";
 
 export function GitHubLink() {
   return (
@@ -10,7 +10,7 @@ export function GitHubLink() {
       target="_blank"
       rel="noopener noreferrer"
     >
-      <ImageThemed
+      <ThemeImage
         aria-hidden
         srcLight={GitHubMarkLight}
         srcDark={GitHubMarkDark}
diff --git a/web/src/components/header/index.tsx b/web/src/components/header/index.tsx
index 348d52240..4e8032d43 100644
--- a/web/src/components/header/index.tsx
+++ b/web/src/components/header/index.tsx
@@ -1,4 +1,4 @@
-import { ImageThemed } from "@/components/image-themed";
+import { ThemeImage } from "@/components/theme-image";
 import { ThemeToggle } from "../theme-toggle";
 import Link from "next/link";
 import LogoLight from "./logo-filterlists-light.png";
@@ -11,7 +11,7 @@ export function Header() {
       <div className="flex h-20 items-center justify-between px-6">
         <div className="flex items-center">
           <Link href="/" aria-label="Go to homepage">
-            <ImageThemed
+            <ThemeImage
               className={styles.logoHeader}
               srcLight={LogoLight}
               srcDark={logoDark}
diff --git a/web/src/components/image-themed.tsx b/web/src/components/image-themed.tsx
deleted file mode 100644
index e56d71865..000000000
--- a/web/src/components/image-themed.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Image, { type ImageProps, type StaticImageData } from "next/image";
-import { useTheme } from "next-themes";
-
-type ThemedImageProps = Omit<ImageProps, "src" | "alt"> & {
-  srcLight: string | StaticImageData;
-  srcDark: string | StaticImageData;
-  alt: string;
-};
-
-export function ImageThemed({
-  srcLight,
-  srcDark,
-  alt,
-  ...props
-}: ThemedImageProps) {
-  const { resolvedTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const src = resolvedTheme === "dark" ? srcDark : srcLight;
-
-  if (!mounted) {
-    return <Image src={srcLight} alt={alt} {...props} />;
-  }
-
-  return <Image src={src} alt={alt} {...props} />;
-}
diff --git a/web/src/components/theme-image.tsx b/web/src/components/theme-image.tsx
new file mode 100644
index 000000000..7a7c8f99e
--- /dev/null
+++ b/web/src/components/theme-image.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import Image, { ImageProps, StaticImageData } from "next/image";
+import { useEffect, useState } from "react";
+
+type Props = Omit<ImageProps, "src" | "loading"> & {
+  srcLight: string | StaticImageData;
+  srcDark: string | StaticImageData;
+};
+
+export const ThemeImage = (props: Props) => {
+  const { srcLight, srcDark, alt, priority, ...rest } = props;
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  if (
+    process.env.NODE_ENV === "development" &&
+    priority === true &&
+    alt !== "FilterLists logo"
+  ) {
+    console.warn(
+      `ThemeImage: [alt="${alt}"] Using priority will cause both light and dark images to be loaded. Only use for LCP images.`,
+    );
+  }
+
+  const src = resolvedTheme === "dark" ? srcDark : srcLight;
+
+  return <Image {...rest} src={src} alt={alt} priority={priority} />;
+};