From bd8bd90ad95349187b4f84ccc10036faf4aa3dc6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= <fatihkadirakin@gmail.com>
Date: Wed, 18 Mar 2026 11:50:33 +0300
Subject: [PATCH] refactor(components): improve widget injection logic for
 prompt list

---
 src/components/ads/ezoic-placeholder.tsx        | 7 +++++--
 src/components/prompts/infinite-prompt-list.tsx | 9 ++++++++-
 src/lib/plugins/widgets/index.ts                | 2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/ads/ezoic-placeholder.tsx b/src/components/ads/ezoic-placeholder.tsx
index fd4404e3..9ad8cf82 100644
--- a/src/components/ads/ezoic-placeholder.tsx
+++ b/src/components/ads/ezoic-placeholder.tsx
@@ -42,8 +42,11 @@ export function EzoicPlaceholder({ id }: EzoicPlaceholderProps) {
   if (blocked) return null;
 
   return (
-    <div ref={containerRef} className="min-h-[250px]">
-      <div id={`ezoic-pub-ad-placeholder-${id}`} />
+    <div 
+      ref={containerRef} 
+      className="min-h-[250px] w-full border rounded-[var(--radius)] bg-muted/30 flex items-center justify-center"
+    >
+      <div id={`ezoic-pub-ad-placeholder-${id}`} className="w-full h-full" />
     </div>
   );
 }
diff --git a/src/components/prompts/infinite-prompt-list.tsx b/src/components/prompts/infinite-prompt-list.tsx
index 9dd2501e..2b5402ee 100644
--- a/src/components/prompts/infinite-prompt-list.tsx
+++ b/src/components/prompts/infinite-prompt-list.tsx
@@ -60,9 +60,15 @@ export function InfinitePromptList({
   const [isLoading, setIsLoading] = useState(false);
   const [hasMore, setHasMore] = useState(initialPrompts.length < initialTotal);
   const [hasError, setHasError] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const loaderRef = useRef<HTMLDivElement>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
 
+  // Set mounted state after hydration
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   // Reset when new data arrives from server
   useEffect(() => {
     // Cancel any in-flight request when filters change
@@ -187,7 +193,8 @@ export function InfinitePromptList({
   }
 
   // Inject widgets into the prompt list (widgets decide their own injection logic)
-  const itemsToRender = injectWidgets(prompts, { filters });
+  // Only inject after mount to prevent hydration mismatch
+  const itemsToRender = isMounted ? injectWidgets(prompts, { filters }) : prompts;
 
   return (
     <div className="space-y-4">
diff --git a/src/lib/plugins/widgets/index.ts b/src/lib/plugins/widgets/index.ts
index f6322713..9c592b7e 100644
--- a/src/lib/plugins/widgets/index.ts
+++ b/src/lib/plugins/widgets/index.ts
@@ -13,7 +13,7 @@ const widgetPlugins: WidgetPlugin[] = [
   bookWidget,
   textreamWidget,
   commandcodeWidget,
-  ...(process.env.EZOIC_ENABLED === "true" ? [ezoicWidget] : []),
+  ezoicWidget,
 ];
 
 /**