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.

Author: paulpopus

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} />

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} />
 

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} />

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} />