Question from the Next.js test

You want to implement a loading UI for an asynchronously loaded component within a nested route /dashboard/settings. How would you structure the route file using React.Suspense?

// app/dashboard/settings/page.js

import React, { Suspense } from 'react';
const SettingsData = React.lazy(() => import('./SettingsData'));

function SettingsPage() {

return(

  // What code goes here?

)

}

  <Suspense>
    <div>Loading...</div>
    <SettingsData />
  </Suspense>

<Suspense fallback={<div>Loading...</div>}>
<SettingsData />
</Suspense>

  <React.Fragment>
    <div>Loading...</div>
    <SettingsData />
  </React.Fragment>