From 1cafe945ab11e4e4965b43dc488769f7798cad46 Mon Sep 17 00:00:00 2001
From: Lee Robinson <me@leerob.io>
Date: Thu, 18 Jan 2024 17:48:24 -0600
Subject: [PATCH] docs: fix JS/TS code block (#60854)

And also making it more clear it doesn't have to be two separate files.
---
 errors/missing-suspense-with-csr-bailout.mdx | 29 +++++++++-----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/errors/missing-suspense-with-csr-bailout.mdx b/errors/missing-suspense-with-csr-bailout.mdx
index e2f6cbca3d..b96ccc8100 100644
--- a/errors/missing-suspense-with-csr-bailout.mdx
+++ b/errors/missing-suspense-with-csr-bailout.mdx
@@ -10,28 +10,25 @@ Reading search parameters through `useSearchParams()` without a Suspense boundar
 
 Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.
 
-```tsx title="app/page.tsx"
-import { SearchBar } from './search'
-import { Suspense } from 'react'
-
-export default function Page() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SearchBar />
-    </Suspense>
-  )
-}
-```
-
-```jsx title="app/search.tsx"
+```jsx title="app/search.js"
 'use client'
 
 import { useSearchParams } from 'next/navigation'
+import { Suspense } from 'react'
 
-export function Search() {
+function Search() {
   const searchParams = useSearchParams()
 
-  return '...'
+  return <input placeholder="Search..." />
+}
+
+export function Searchbar() {
+  return (
+    // You could have a loading skeleton as the `fallback` too
+    <Suspense>
+      <Search />
+    </Suspense>
+  )
 }
 ```