1. /**
    
  2.  * Copyright (c) Meta Platforms, Inc. and affiliates.
    
  3.  *
    
  4.  * This source code is licensed under the MIT license found in the
    
  5.  * LICENSE file in the root directory of this source tree.
    
  6.  *
    
  7.  */
    
  8. 
    
  9. import {Suspense, lazy} from 'react';
    
  10. import {ErrorBoundary} from 'react-error-boundary';
    
  11. import Html from './Html';
    
  12. import Spinner from './Spinner';
    
  13. import Layout from './Layout';
    
  14. import NavBar from './NavBar';
    
  15. 
    
  16. const Comments = lazy(() => import('./Comments' /* webpackPrefetch: true */));
    
  17. const Sidebar = lazy(() => import('./Sidebar' /* webpackPrefetch: true */));
    
  18. const Post = lazy(() => import('./Post' /* webpackPrefetch: true */));
    
  19. 
    
  20. export default function App({assets}) {
    
  21.   return (
    
  22.     <Html assets={assets} title="Hello">
    
  23.       <Suspense fallback={<Spinner />}>
    
  24.         <ErrorBoundary FallbackComponent={Error}>
    
  25.           <Content />
    
  26.         </ErrorBoundary>
    
  27.       </Suspense>
    
  28.     </Html>
    
  29.   );
    
  30. }
    
  31. 
    
  32. function Content() {
    
  33.   return (
    
  34.     <Layout>
    
  35.       <NavBar />
    
  36.       <aside className="sidebar">
    
  37.         <Suspense fallback={<Spinner />}>
    
  38.           <Sidebar />
    
  39.         </Suspense>
    
  40.       </aside>
    
  41.       <article className="post">
    
  42.         <Suspense fallback={<Spinner />}>
    
  43.           <Post />
    
  44.         </Suspense>
    
  45.         <section className="comments">
    
  46.           <h2>Comments</h2>
    
  47.           <Suspense fallback={<Spinner />}>
    
  48.             <Comments />
    
  49.           </Suspense>
    
  50.         </section>
    
  51.         <h2>Thanks for reading!</h2>
    
  52.       </article>
    
  53.     </Layout>
    
  54.   );
    
  55. }
    
  56. 
    
  57. function Error({error}) {
    
  58.   return (
    
  59.     <div>
    
  60.       <h1>Application Error</h1>
    
  61.       <pre style={{whiteSpace: 'pre-wrap'}}>{error.stack}</pre>
    
  62.     </div>
    
  63.   );
    
  64. }