react#Suspense JavaScript Examples

Content = () => {
    return(
        <>
            <HelmetProvider>
                <Helmet>
                    <title>{GetTitle() + " - Zeroneko"}</title>
                    <link rel="icon" href={logoIconWhite} />
                </Helmet>
            </HelmetProvider>
            <main className="relative m-0 bg-gray-50 dark:bg-gray-800 dark:text-gray-100 pt-8 pb-16">
                <Suspense fallback={<FallbackLoading height="96" marginY="48"/>}>
                    <Switch>
                        {routes.map((route, idx) => {
                        return route.component && (
                            <FancyRoute
                            key={idx}
                            path={route.path}
                            exact={route.exact}
                            name={route.name}
                            render={props => (<route.component {...props} symbol={route.symbol} title={route.name} />)} 
                            />
                        )
                        })}
                    </Switch>
                </Suspense>
            </main>
        </>
    )
}

export default function Pool({ params }) {
  useEffect(() => {
    ReactGA.pageview(window.location.pathname + window.location.search)
  }, [])

  const AddLiquidityParams = () => <AddLiquidity params={params} />

  const RemoveLiquidityParams = () => <RemoveLiquidity params={params} />

  const CreateExchangeParams = () => <CreateExchange params={params} />

  return (
    <>
      <ModeSelector />
      {/* this Suspense is for route code-splitting */}
      <Suspense fallback={null}>
        <Switch>
          <Route exact strict path="/add-liquidity" component={AddLiquidityParams} />
          <Route exact strict path="/remove-liquidity" component={RemoveLiquidityParams} />
          <Route exact strict path="/create-exchange" component={CreateExchangeParams} />
          <Route
            path="/create-exchange/:tokenAddress"
            render={({ match }) => {
              return (
                <Redirect to={{ pathname: '/create-exchange', state: { tokenAddress: match.params.tokenAddress } }} />
              )
            }}
          />
          <Redirect to="/add-liquidity" />
        </Switch>
      </Suspense>
    </>
  )
}

render() {
    const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
    const { openKeys } = this.state;
    const defaultProps = collapsed ? {} : { openKeys };

    const siderClassName = classNames(styles.sider, {
      [styles.fixSiderbar]: fixSiderbar,
      [styles.light]: theme === 'light',
    });
    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        breakpoint="lg"
        onCollapse={onCollapse}
        width={256}
        theme={theme}
        className={siderClassName}
      >
        <div className={styles.logo} id="logo">
          <Link to="/">
            <img src={logo} alt="logo" />
            <h1>Ant Design Pro</h1>
          </Link>
        </div>
        <Suspense fallback={<PageLoading />}>
          <BaseMenu
            {...this.props}
            mode="inline"
            handleOpenChange={this.handleOpenChange}
            onOpenChange={this.handleOpenChange}
            style={{ padding: '16px 0', width: '100%' }}
            {...defaultProps}
          />
        </Suspense>
      </Sider>
    );
  }

function MyVerticallyCenteredModal(props) {
  const { activity } = props;

  return (
    <Modal
      {...props}
      size="lg"
      className="video_activity"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          <img src={logo} alt="" />
        </Modal.Title>
      </Modal.Header>

      <Modal.Body>
        {!!activity && (
          <Suspense fallback={<div>Loading</div>}>
            <H5PPreview
              activityId={activity}
              tokenrequire={false}
              showltipreview
            />
          </Suspense>
        )}
      </Modal.Body>
    </Modal>
  );
}

App = () => (
  <BrowserRouter>
    <UserProvider>
      <NotificationsProvider>
        <ThemeProvider>
          <ConfirmProvider>
            <Suspense fallback={<LinearProgress />}>
              <CssBaseline />
              <Navigation />
            </Suspense>
          </ConfirmProvider>
        </ThemeProvider>
      </NotificationsProvider>
    </UserProvider>
  </BrowserRouter>
)

App = () => (
  <Suspense fallback={<Loader />}>
    <Fragment>
      <Routes />
      <Toaster
        {...{
          autoClose: 5000,
          position: toast.POSITION.TOP_CENTER,
          newestOnTop: true,
          closeOnClick: true,
          pauseOnVisibilityChange: true,
          draggable: true,
          className: 'solid-toaster-container',
          toastClassName: 'solid-toaster',
          bodyClassName: 'solid-toaster-body',
          transition: Slide
        }}
      />
    </Fragment>
  </Suspense>
)

render () {
    return (
      <Suspense fallback={<Spinner/>}>
        <Switch>
          <Route exact path="/dashboard" component={ Dashboard } />


          <Route path="/basic-ui/buttons" component={ Buttons } />
          <Route path="/basic-ui/dropdowns" component={ Dropdowns } />
          <Route path="/basic-ui/typography" component={ Typography } />


          <Route path="/form-Elements/basic-elements" component={ BasicElements } />

          <Route path="/tables/basic-table" component={ BasicTable } />


          <Route path="/icons/mdi" component={ Mdi } />


          <Route path="/charts/chart-js" component={ ChartJs } />


          <Route path="/user-pages/login-1" component={ Login } />
          <Route path="/user-pages/register-1" component={ Register1 } />
          <Route path="/user-pages/lockscreen" component={ Lockscreen } />

          <Route path="/error-pages/error-404" component={ Error404 } />
          <Route path="/error-pages/error-500" component={ Error500 } />

          <Route path="/general-pages/blank-page" component={ BlankPage } />


          <Redirect to="/dashboard" />
        </Switch>
      </Suspense>
    );
  }

render () {
    return (
      <div id='ratings-reviews-main-container'>
        <div id='ratings-reviews-header'>
          <h3>Ratings & Reviews</h3>
        </div>
        <div id='breakdown-reviewlist-content'>
          <div id='rating-breakdown-container'>
            <RatingBreakdown
              productMetadata={this.props.productMetadata}
              updateFilter={this.updateFilter}
            />
          </div>
          <div id='review-list-container'>
          <Suspense fallback={<div>Loading</div>}>
            <ReviewList
              reviewsList={this.state.filteredList}
              getReviews={this.getReviews}
              productMetadata={this.props.productMetadata}
              filterSelections={this.state.filterSelections}
              reRender={this.reRender}
              productInfo={this.props.productInfo}
            />
          </Suspense>
            </div>
          </div>
      </div>
    );

  }

// Wraping App.jsx into Provider component to make data from the store avaliable throughout all application
// Also wraping the App.jsx with ThemeProvider and CssBaseline to applay Material-UI theme settings
ReactDOM.render(
  <div>
    <Suspense fallback={<Loading />}>
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <App />
        </ThemeProvider>
      </Provider>
    </Suspense>
  </div>,

  document.getElementById('root')
);

// Wrap the main component so the loading widget is limited to just the section where the contact
// info is displayed.
function ContactInfoWrapped(props) {
  return (
    <Suspense fallback={<Skeleton />}>
      <ContactInfo {...props} />
    </Suspense>
  );
}

/**
 * Create component which is loaded async, showing a loading spinner
 * in the meantime.
 * @param {Function} loadFunc - Loading options
 * @returns {React.Component}
 */
export function loadable(loadFunc) {
  const OtherComponent = React.lazy(loadFunc)
  return function LoadableWrapper(loadableProps) {
    return (
      <Suspense fallback={<LoadingSpinner />}>
        <OtherComponent {...loadableProps} />
      </Suspense>
    )
  }
}

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <GlobalFonts />
      <ThemeProvider theme={theme}>
        <Suspense fallback={<div>Carregando...</div>}>
          <App />
        </Suspense>
      </ThemeProvider>
    </Router>
  </Provider>,
  document.getElementById("root")
);

ReactDOM.render(
  <MuiThemeProvider muiTheme={muiTheme}>
    <ErrorBoundary>
      <ApolloProvider store={store.data} client={ApolloClientSingleton}>
        <Suspense fallback={<LoadingIndicator />}>
          <Router history={history} routes={makeRoutes()} />
        </Suspense>
      </ApolloProvider>
    </ErrorBoundary>
  </MuiThemeProvider>,
  document.getElementById("mount")
);

function App() {
  return (
    <div className="App">
      <Router>
        <PageProgress color={"#1d4db6"} height={5} />
        <Suspense fallback={<div></div>}>
          <Switch>
            {routes &&
              routes.length > 0 &&
              routes.map((route, index) => {
                return (
                  <Route
                    key={index}
                    exact // we should either use exact or Switch component (using both doesn't look clean)
                    path={route.path}
                    component={route.component}
                  />
                );
              })}
            <Route>
              <NotFound />
            </Route>
          </Switch>
        </Suspense>
      </Router>
    </div>
  );
}

loadable = (importFunc, { fallback = null } = { fallback: null }) => {
  const LazyComponent = lazy(importFunc);

  return props => (
    <Suspense fallback={fallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

function App() {
  document
    .getElementsByTagName("body")[0]
    .classList.add(localStorage.getItem("mode"));
  return (
    <div className="App">
      <Router>
        <MainNavBar />
        <Suspense fallback={<Loader />}>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/student" exact component={StuLanding} />
            <Route path="/student/login" exact component={StuLogin} />
            <Route path="/student/signup" exact component={StuSignup} />
            <Route path="/student/profile" exact component={Profile} />
            <Route path="/newcr" exact component={NewCr} />
            <Route path="/newcr/details" exact component={CrDetails} />
            <Route path="/cr" exact component={CrLanding} />
            <Route path="/cr/login" exact component={CrLogin} />
            <Route path="/cr/class" exact component={classDetails} />
            <Route path="/teacher" exact component={Landing} />
            <Route path="/teacher/login" exact component={TeacherLogin} />
            <Route path="/teacher/class" exact component={ClassDetails} />
            <Route path="/newteacher" exact component={NewTeacher} />
            <Route
              path="/newteacher/details"
              exact
              component={TeacherDetails}
            />
            <Route path="/about" exact component={About} />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </Router>
    </div>
  );
}

render() {
    return (
      <TrackerProvider tracker={tracker}>
        <UserPreferenceContext.Provider value={this.props.userPreferences}>
          <ThemeProvider theme={this.props.userPreferences.theme}>
            <BrowserGlobalStyles />
            <AntdGlobalStyles />
            <AntdTableStyles />
            <AntdFormStyles />
            <AntdModalStyles />
            <AppClassStyles />
            <WalletConnectStyles />
            <Suspense fallback={null}>
              <ConnectedRouter history={history}>{routes}</ConnectedRouter>
            </Suspense>
          </ThemeProvider>
        </UserPreferenceContext.Provider>
      </TrackerProvider>
    );
  }

function App() {
  //Getting isAuthenticated store value from Authentication slice.
  const isAuthenticated = useSelector((state) => state.authentication.isAuthenticated)

  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <PublicRoute path="/login" isAuthenticated={isAuthenticated}>
            <LoginPage/>
          </PublicRoute>
          <PrivateRoute path="/" isAuthenticated={isAuthenticated}>
            <ProtectedRoutes/>
          </PrivateRoute>
        </Switch>
      </Suspense>
    </Router>
  );
}

export default function App () {
  return (
    <Router>
      <Suspense fallback={<LoadingScreen />}>
        <Switch>
          <Route path='/callback' render={props => {
            Auth.callback(props)
            return <LoadingScreen text='Logging in...' />
          }}/>
          <Route component={ReduxApp} />
        </Switch>
      </Suspense>
    </Router>
  )
}

render () {
    if (!this.state.loaded) {
      return <LoadingScreen />
    }

    if (!this.state.dependencies) {
      return (
        <Suspense fallback={<LoadingScreen />}>
          <Welcome
            isReady={checkDependencies}
            onGetStarted={this.skip}
            truffleSubtitle='Used to create and compile a project.'
          />
          <NotificationSystem />
          <GlobalModals icon={icon} />
        </Suspense>
      )
    }

    return (
      <Provider store={redux.store}>
        <div
          className='body'
          style={{ paddingTop: this.state.dependencies ? '49px' : '0' }}
        >
          <Routes>
            <Header history={this.props.history} />
            <NotificationSystem />
            <GlobalModals icon={icon} />
          </Routes>
        </div>
      </Provider>
    )
  }

export default function App() {
  useEffect(() => {
    if (process.env.GA_MEASUREMENT_ID) {
      ReactGA.initialize(process.env.GA_MEASUREMENT_ID.toString());
    }
  }, []);
  return (
    <Router>
      <Suspense fallback={<LoadingScreen />}>
        <Switch>
          <Route
            path="/callback"
            render={(props) => {
              Auth.callback(props);
              return <LoadingScreen />;
            }}
          />
          <Route component={ReduxApp} />
        </Switch>
      </Suspense>
    </Router>
  );
}

render () {
    if (!this.state.loaded) {
      return <LoadingScreen />
    }

    if (!this.state.dependencies) {
      return (
        <Suspense fallback={<LoadingScreen />}>
          <Welcome isReady={checkDependencies} onGetStarted={this.skip} />
          <NotificationSystem />
          <GlobalModals icon={icon}>
            <p>Telegram: <a href='#' onClick={() => fileOps.current.openLink('https://t.me/ckb_studio')}>https://t.me/ckb_studio</a></p>
          </GlobalModals>
        </Suspense>
      )
    }

    return (
      <Provider store={redux.store}>
        <div
          className='body'
          style={{ paddingTop: this.state.dependencies ? '49px' : '0' }}
        >
          <Routes>
            <Header history={this.props.history} />
            <NotificationSystem />
            <GlobalModals icon={icon}>
              <p>Telegram: <a href='#' onClick={() => fileOps.current.openLink('https://t.me/ckb_studio')}>https://t.me/ckb_studio</a></p>
            </GlobalModals>
          </Routes>
        </div>
      </Provider>
    )
  }

render () {
    if (!this.state.loaded) {
      return <LoadingScreen />
    }

    if (!this.state.dependencies) {
      return (
        <Suspense fallback={<LoadingScreen />}>
          <Welcome isReady={checkDependencies} onGetStarted={this.skip} />
          <NotificationSystem />
          <GlobalModals icon={icon} />
        </Suspense>
      )
    }

    return (
      <Provider store={redux.store}>
        <div
          className='body'
          style={{ paddingTop: this.state.dependencies ? '49px' : '0' }}
        >
          <Routes>
            <Header history={this.props.history} />
            <NotificationSystem />
            <GlobalModals icon={icon} />
          </Routes>
        </div>
      </Provider>
    )
  }

export default function App () {
  return (
    <HashRouter>
      <Suspense fallback={<LoadingScreen />}>
        <Route component={ReduxApp} />
      </Suspense>
    </HashRouter>
  )
}

OrderLoader = () => (
  <Suspense
    fallback={
      <div className="loading-fullpage">
        <fbt desc="Loading">Loading</fbt>
      </div>
    }
  >
    <Order />
  </Suspense>
)

App = () => (
    <div className="container">
        <Router>
            <Navbar />
            <Suspense fallback={renderLoader()}>
                <Switch>
                    <Route path="/" exact component={Landing} />
                    <Route path="/posts" exact component={PostsList} />
                    <Route path="/posts/new/" exact component={CreatePost} />
                    <Route path="/posts/:id" exact component={Post} />
                    <Route path="/posts/:id/edit" exact component={EditPost} />
                    <Route path="/login" component={Login} />
                    <Route path="/about" component={About} />
                </Switch>
            </Suspense>
            <Footer />
        </Router>
    </div>
)

Routes = () => <Switch>
    <Route exact path={paths.list}
        component={() => (
            <ErrorBoundary fallback={<LoadError bodyMessage='List' />}>
                <Suspense fallback={<Loading />}> <List /> </Suspense>
            </ErrorBoundary>
        )}
    />
    <Route exact path={paths.details}
        component={() => (
            //<ErrorBoundary fallback={<LoadError bodyMessage='Detail' />}>
                <Suspense fallback={<Loading />}> <Details /> </Suspense>
            //</ErrorBoundary>
        )}
    />
    <Redirect path='*' to={paths.list} push>
    </Redirect>
</Switch>

Routes = () => (
  <Suspense
    fallback={
      <Bullseye>
        <Spinner />
      </Bullseye>
    }
  >
    <Switch>
      <Route path="/">
        <HomePage />
      </Route>
      <Route>
        <OopsPage />
      </Route>
    </Switch>
  </Suspense>
)

Routes = () => (
    <Suspense>
        <Switch>
            {paths.map((path) => (
                <Route
                    key={path.title}
                    {...path}
                />
            ))}
            <Redirect path="/signatures" to={`${paths[1].path}`} push />
            {/* Finally, catch all unmatched routes */}
            <Redirect path="*" to={`${paths[1].path}`} push />
        </Switch>
    </Suspense>
)