refactor: suspense fallback

Author: asmyshlyaev177

packages/example-nextjs14/src/app/(tests)/test-use-client/page.tsx

@@ -16,10 +16,10 @@ export default function Home() {
       </header>
 
       <div className="flex flex-col md:flex-row gap-8">
-        <Suspense>
+        <Suspense fallback={null}>
           <Form className="flex max-h-[850px] flex-col md:flex-row gap-8 basis-1/2" />
         </Suspense>
-        <Suspense>
+        <Suspense fallback={null}>
           <Status
             className="flex-1 max-h-[450px] bg-gray-100
              rounded-lg p-4 flex flex-col shadow-md border border-grey

packages/example-nextjs14/src/app/(tests)/useHook-race-condition/Component.tsx

@@ -31,11 +31,11 @@ export function Component() {
       }}>Reload</button>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: "12px" }}>
-        <Suspense>
+        <Suspense fallback={null}>
           <UseStateComp />
         </Suspense>
 
-        <Suspense>
+        <Suspense fallback={null}>
           {urlState.showForm && <UseStateComp showCheckbox={false} />}
         </Suspense>
       </div>

packages/example-nextjs14/src/app/(tests)/useHook-race-condition/page.tsx

@@ -3,5 +3,5 @@ import React, { Suspense } from 'react';
 import { Component } from './Component';
 
 export default async function Page() {
-  return (<Suspense><Component /></Suspense>)
+  return (<Suspense fallback={null}><Component /></Suspense>)
 }

packages/example-nextjs14/src/app/(tests)/useUrlEncode/page.tsx

@@ -12,10 +12,10 @@ const Page = () => {
         <h2>Page for testing purposes</h2>
       </div>
       <div className="flex gap-4">
-        <Suspense>
+        <Suspense fallback={null}>
           <Comp1 className="basis-1/2" />
         </Suspense>
-        <Suspense>
+        <Suspense fallback={null}>
           <Comp2 className="basis-1/2" />
         </Suspense>
       </div>

packages/example-nextjs15/src/app/(tests)/test-use-client/page.tsx

@@ -14,10 +14,10 @@ export default function Home() {
       </header>
 
       <div className="flex flex-col md:flex-row gap-8">
-        <Suspense>
+        <Suspense fallback={null}>
           <Form className="flex max-h-[850px] flex-col md:flex-row gap-8 basis-1/2" />
         </Suspense>
-        <Suspense>
+        <Suspense fallback={null}>
           <Status
             className="flex-1 max-h-[450px] bg-gray-100 rounded-lg p-4 flex flex-col shadow-md border border-grey basis-1/2 grow-0"
           />

packages/example-nextjs15/src/app/(tests)/useHook-race-condition/Component.tsx

@@ -31,11 +31,11 @@ export function Component() {
       }}>Reload</button>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: "12px" }}>
-        <Suspense>
+        <Suspense fallback={null}>
           <UseStateComp />
         </Suspense>
 
-        <Suspense>
+        <Suspense fallback={null}>
           {urlState.showForm && <UseStateComp showCheckbox={false} />}
         </Suspense>
       </div>

packages/example-nextjs15/src/app/(tests)/useHook-race-condition/page.tsx

@@ -3,5 +3,5 @@ import React, { Suspense } from 'react';
 import { Component } from './Component';
 
 export default async function Page() {
-  return (<Suspense><Component /></Suspense>)
+  return (<Suspense fallback={null}><Component /></Suspense>)
 }

packages/example-nextjs15/src/app/(tests)/useUrlEncode/page.tsx

@@ -10,10 +10,10 @@ const Page = () => {
         <h2>Page for testing purposes</h2>
       </div>
       <div className="flex gap-4">
-        <Suspense>
+        <Suspense fallback={null}>
           <Comp1 className="basis-1/2" />
         </Suspense>
-        <Suspense>
+        <Suspense fallback={null}>
           <Comp2 className="basis-1/2" />
         </Suspense>
       </div>