From 050ff8409c031b606fdbc634fa8bfcee0c720b70 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Fri, 13 Dec 2024 15:18:13 -0600
Subject: [PATCH] templates: conditionally render the live preview listener
 component (#9973)

Conditionally render the live preview listener component so that we
don't make unnecessary requests to the API without draft mode being
enabled.
---
 templates/website/src/app/(frontend)/[slug]/page.tsx           | 3 ++-
 templates/website/src/app/(frontend)/posts/[slug]/page.tsx     | 3 ++-
 .../with-vercel-website/src/app/(frontend)/[slug]/page.tsx     | 3 ++-
 .../src/app/(frontend)/posts/[slug]/page.tsx                   | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/templates/website/src/app/(frontend)/[slug]/page.tsx b/templates/website/src/app/(frontend)/[slug]/page.tsx
index 8ab6ec717b1..d83339187a0 100644
--- a/templates/website/src/app/(frontend)/[slug]/page.tsx
+++ b/templates/website/src/app/(frontend)/[slug]/page.tsx
@@ -46,6 +46,7 @@ type Args = {
 }
 
 export default async function Page({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
   const { slug = 'home' } = await paramsPromise
   const url = '/' + slug
 
@@ -72,7 +73,7 @@ export default async function Page({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
-      <LivePreviewListener />
+      {draft && <LivePreviewListener />}
 
       <RenderHero {...hero} />
       <RenderBlocks blocks={layout} />
diff --git a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
index 63f805713be..ab6ab19a31f 100644
--- a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
+++ b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
@@ -42,6 +42,7 @@ type Args = {
 }
 
 export default async function Post({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
   const { slug = '' } = await paramsPromise
   const url = '/posts/' + slug
   const post = await queryPostBySlug({ slug })
@@ -55,7 +56,7 @@ export default async function Post({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
-      <LivePreviewListener />
+      {draft && <LivePreviewListener />}
 
       <PostHero post={post} />
 
diff --git a/templates/with-vercel-website/src/app/(frontend)/[slug]/page.tsx b/templates/with-vercel-website/src/app/(frontend)/[slug]/page.tsx
index 8ab6ec717b1..d83339187a0 100644
--- a/templates/with-vercel-website/src/app/(frontend)/[slug]/page.tsx
+++ b/templates/with-vercel-website/src/app/(frontend)/[slug]/page.tsx
@@ -46,6 +46,7 @@ type Args = {
 }
 
 export default async function Page({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
   const { slug = 'home' } = await paramsPromise
   const url = '/' + slug
 
@@ -72,7 +73,7 @@ export default async function Page({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
-      <LivePreviewListener />
+      {draft && <LivePreviewListener />}
 
       <RenderHero {...hero} />
       <RenderBlocks blocks={layout} />
diff --git a/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.tsx b/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.tsx
index 63f805713be..ab6ab19a31f 100644
--- a/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.tsx
+++ b/templates/with-vercel-website/src/app/(frontend)/posts/[slug]/page.tsx
@@ -42,6 +42,7 @@ type Args = {
 }
 
 export default async function Post({ params: paramsPromise }: Args) {
+  const { isEnabled: draft } = await draftMode()
   const { slug = '' } = await paramsPromise
   const url = '/posts/' + slug
   const post = await queryPostBySlug({ slug })
@@ -55,7 +56,7 @@ export default async function Post({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
-      <LivePreviewListener />
+      {draft && <LivePreviewListener />}
 
       <PostHero post={post} />