templates: conditionally render the live preview listener component (p…

…ayloadcms#9973) Conditionally render the live preview listener component so that we don't make unnecessary requests to the API without draft mode being enabled.
akhrarovsaid · Dec 13, 2024 · 050ff84 · 050ff84
1 parent 4dc5003
commit 050ff84
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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} />