react#Suspense TypeScript Examples

App = () => {
  return (
    <Provider value={client}>
      <RecentVisitProvider>
        <BrowserRouter basename={config.baseURL}>
          <BreadcrumbProvider>
            <Suspense fallback={<Loader />}>
              <opc-provider>
                <opc-nav />
                <opc-menu-drawer />
                <opc-notification-drawer />
                <opc-feedback />
              </opc-provider>
              <Router />
            </Suspense>
          </BreadcrumbProvider>
        </BrowserRouter>
      </RecentVisitProvider>
    </Provider>
  );
}

Routers: React.FC<Iprops> = props => {
  /**
   * 切换路由触发
   * 模拟vue的路由守卫
   */
  const onEnter = useCallback(Component => {
    return <Component {...props} />
  }, [])

  return (
    <ErrorBoundary location={props.location}>
      <Suspense fallback={<Loading />}>
        <Switch>
          <Route exact path="/home" render={() => onEnter(Home)} />
          <Route exact path="/home/about" render={() => onEnter(About)} />
          <Route exact path="/home/echarts" render={() => onEnter(Echarts)} />
          <Route exact path="/home/form" render={() => onEnter(FormTable)} />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </ErrorBoundary>
  )
}

Router = () => {
  return (
    <Suspense fallback={null}>
      <Styles />
      <Header />
      <Switch>
        {routes.map((routeItem) => {
          return (
            <Route
              key={routeItem.component}
              path={routeItem.path}
              exact={routeItem.exact}
              component={lazy(() => import(`../pages/${routeItem.component}`))}
            />
          );
        })}
      </Switch>
      <Footer />
    </Suspense>
  );
}

App = () => {
  const [page, setPage] = useState<string>('')

  useEffect(() => {
    async function preLoad() {
      if (process.env.NODE_ENV === 'development') {
        //you can set the current window to dev if you want to see the dev page <Normal Browser>
        setPage(WINDOW_NAMES.DESKTOP)
      } else {
        const currentWindow = await getCurrentWindow()
        setPage(currentWindow)
        console.info(
          '[? overwolf-modern-react-boilerplate][? src/app/App.tsx][? useEffect - preLoad]',
          JSON.stringify({ currentWindow }, null, 2),
        )
      }
    }
    preLoad()
  }, [])
  //this is fallback for the loading current screen
  return (
    <Suspense fallback={<Loading />}>
      <CurrentPage page={page} />
    </Suspense>
  )
}

export default function ConnectServiceSelect({
  value = [],
  className,
  TextFieldProps = {},
  ...props
}: IConnectServiceSelectProps) {
  const classes = useStyles();

  const sanitisedValue = Array.isArray(value) ? value : [];

  return (
    <TextField
      label=""
      hiddenLabel
      variant={"filled" as any}
      select
      value={sanitisedValue}
      className={clsx(classes.root, className)}
      {...TextFieldProps}
      SelectProps={{
        renderValue: (value) => `${(value as any[]).length} selected`,
        displayEmpty: true,
        classes: { root: classes.selectRoot },
        ...TextFieldProps.SelectProps,
        // Must have this set to prevent MUI transforming `value`
        // prop for this component to a comma-separated string
        MenuProps: {
          classes: { paper: classes.paper, list: classes.menuChild },
          MenuListProps: { disablePadding: true },
          getContentAnchorEl: null,
          anchorOrigin: { vertical: "bottom", horizontal: "center" },
          transformOrigin: { vertical: "top", horizontal: "center" },
          ...TextFieldProps.SelectProps?.MenuProps,
        },
      }}
    >
      <ErrorBoundary>
        <Suspense fallback={<Loading />}>
          <PopupContents value={sanitisedValue} {...props} />
        </Suspense>
      </ErrorBoundary>
    </TextField>
  );
}

render() {
        return (
            <LanguageContext.Provider value={this.state}>
                <ButtonAppBar />
                <HeaderSection />
                <main className="main">
                    <Suspense fallback={<div>Loading...</div>}>
                        <Switch>
                            <Route exact path='/'>
                                <Redirect to="/home" />
                            </Route>
                            <Route path='/home' component={HomePage}/>
                            <Route path='/game' component={GamePage}/>
                            <Route path='/art' component={ArtPage}/>
                        </Switch>
                    </Suspense>
                </main>
            </LanguageContext.Provider>
        );
    }

App = (): JSX.Element => {
  return (
    <ThemeProvider theme={createTheme("light")}>
      <CssBaseline />
      <SnackbarNotificationProvider>
        <SessionProvider>
          <Router>
            <Suspense fallback={<div />}>
              <Switch>
                <Route path={SIGNIN_ROUTE}>
                  <SigninSignupPage variant="signin" />
                </Route>
                <Route path={SIGNUP_ROUTE}>
                  <SigninSignupPage variant="signup" />
                </Route>
                <Route path={AUTH_ACTION_PATH}>
                  <AuthAction />
                </Route>
                <PrivateRoute path={APP_LANDING}>
                  <LandingPage />
                </PrivateRoute>
                <Redirect to={APP_LANDING} />
              </Switch>
            </Suspense>
          </Router>
        </SessionProvider>
      </SnackbarNotificationProvider>
    </ThemeProvider>
  );
}

AppRouter: FunctionComponent = () => {
  return (
    <Router>
      <RecoilRoot>
        <Suspense fallback={<span>Loading...</span>}>
          <Switch>
            <Route exact path="/" component={App} />
          </Switch>
        </Suspense>
      </RecoilRoot>
    </Router>
  )
}

BaseRoutes: FC<IPorps> = ({ routes = [], basePath = '' }) => (
    <Suspense fallback={<Spin spinning />}>
        <Switch>
            {routes.map(({ path, ...args }) => (
                <Route path={`${basePath}${path}`} {...args} />
            ))}
            <Redirect to={{ pathname: `${basePath}${routes[0].path}` }} />
        </Switch>
    </Suspense>
)

AppRouter = ({
  cookiesModalVisible,
}: IAppRouter): JSX.Element => (
  <Fragment>
    <BrowserRouter>
      {cookiesModalVisible && <CookiesModal />}
      <Suspense fallback={<Loading display />}>
        <Switch>
          <Route path="/" component={Landing} exact />
          <Route path="/home" component={Landing} />
          <Route path="/auth/callback" component={AuthCallback} />
          <Route path="/auth" component={Auth} />
          <Fragment>
            <Navbar />
            <ProtectedRoute path="/b/:id" component={Board} />
            <ProtectedRoute path="/boards" component={Boards} />
          </Fragment>
        </Switch>
      </Suspense>
    </BrowserRouter>
  </Fragment>
)

export default function App() {
  return (
    <Suspense fallback={null}>
      <HashRouter>
        <Route component={GoogleAnalyticsReporter} />
        <Route component={DarkModeQueryParamReader} />
        <AppWrapper>
          <HeaderWrapper>
            <Header />
          </HeaderWrapper>
          <BodyWrapper>
            <Popups />
            <Web3ReactManager>
              <Switch>
                <Route exact strict path="/swap" component={Swap} />
                <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
                <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
                <Route exact strict path="/find" component={PoolFinder} />
                <Route exact strict path="/pool" component={Pool} />
                <Route exact strict path="/create" component={RedirectToAddLiquidity} />
                <Route exact path="/add" component={AddLiquidity} />
                <Route exact path="/add/:currencyIdA" component={RedirectOldAddLiquidityPathStructure} />
                <Route exact path="/add/:currencyIdA/:currencyIdB" component={RedirectDuplicateTokenIds} />
                <Route exact strict path="/remove/v1/:address" component={RemoveV1Exchange} />
                <Route exact strict path="/remove/:tokens" component={RedirectOldRemoveLiquidityPathStructure} />
                <Route exact strict path="/remove/:currencyIdA/:currencyIdB" component={RemoveLiquidity} />
                <Route exact strict path="/migrate/v1" component={MigrateV1} />
                <Route exact strict path="/migrate/v1/:address" component={MigrateV1Exchange} />
                <Route component={RedirectPathToSwapOnly} />
              </Switch>
            </Web3ReactManager>
            <Marginer />
          </BodyWrapper>
        </AppWrapper>
      </HashRouter>
    </Suspense>
  )
}

App = () => {
  return (
    <Suspense fallback={<Spin size="large" className="layout__loading" />}>
      {/* <Authority> */}
      <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
      {/* </Authority> */}
    </Suspense>
  );
}

root.render(
  <div>
    <h1>Hello from React DOM</h1>
    <AverageComponent />
    <TotalScoreComponent />
    <Suspense fallback={<h1>Loading ...</h1>}>
      <RequestGet />
    </Suspense>
  </div>
);

export default function TokenBalance({ token }: { token: Token }): JSX.Element {
  const { colorMode } = useColorMode()
  return (
    <ErrorBoundary
      fallback={
        <IconButton
          variant="outline"
          backgroundColor={BG[colorMode]}
          icon="warning"
          aria-label="Failed"
          isDisabled
          cursor="default !important"
          _hover={{}}
          _active={{}}
        />
      }
    >
      <Suspense
        fallback={
          <Button
            variant="outline"
            backgroundColor={BG[colorMode]}
            isLoading
            cursor="default !important"
            _hover={{}}
            _active={{}}
          >
            {null}
          </Button>
        }
      >
        <Balance token={token} />
      </Suspense>
    </ErrorBoundary>
  )
}

AppRoute: React.FunctionComponent<{}> = () => {

    return (
        <Suspense fallback={<div className="container-div"><div className="container-subdiv"></div></div>}>
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={DiscoverWrapperPage} />
                    <Route exact path="/discover" component={DiscoverWrapperPage} />
                    <Route exact path="/discover-team" component={DiscoverTeamWrapperPage} />
                    <Route exact path="/configtab" component={TeamsConfigPage} />
                    <Route exact path="/signin" component={SignInPage} />
                    <Route exact path="/signin-simple-start" component={SignInSimpleStart} />
                    <Route exact path="/signin-simple-end" component={SignInSimpleEnd} />
                    <Route exact path="/error" component={ErrorPage} />
                    <Route exact path="/project-closure" component={ProjectClosure} />
                    <Route exact path="/project-dialog" component={CloseProjectDialog} />
                    <Route exact path="/skill-acquired" component={SkillsAquiredTab} />
                    <Route exact path="/add-new-project" component={NewProjectDialog} />
                    <Route exact path="/edit-new-project" component={EditProjectDialog} />
                    <Route exact path="/my-created-projects" component={MyCreatedProjects} />
                    <Route exact path="/my-joined-projects" component={MyJoinedProjects} />
                    <Route exact path="/join-project" component={JoinProject} />
                    <Route exact path="/join-project-success" component={JoinProjectSuccessPage} />
                    <Route exact path="/my-projects" component={MyProjects} />
                    <Route component={Redirect} />
                </Switch>
            </BrowserRouter>
        </Suspense>
    );
}

Providers: React.FC = ({ children }) => {
  return (
    <div>
      <Suspense fallback={<Background fallback={true} />}>
        <ThemeProvider>
          <CssBaseline />
          {children}
        </ThemeProvider>
      </Suspense>
    </div>
  );
}

ReactDOM.render(
    <React.StrictMode>
        <RecoilRoot>
            <Suspense fallback={<Loading />}>
                <App />
            </Suspense>
        </RecoilRoot>
    </React.StrictMode>,
    document.getElementById("root")
);

Phone: React.FC = (props: any) => {
    const loading = () => <div className="animated fadeIn pt-1 text-center">Chargement...</div>

    return (
        <div className="phone-container">
            <PhoneCoque />
            <div className="test-bg" />

            <Suspense fallback={loading()}>
                <HashRouter basename='/phone'>
                    <div className="phone-content" style={{ backgroundImage: `url(${background})` }}>
                        <HeaderBar />
                        <BannerNotifications />
                        <Switch>
                            {routes.map((route, idx) => {
                                return route.component ? (
                                    <Route
                                        key={idx}
                                        path={route.path}
                                        exact={route.exact}
                                        render={(props: any) => (
                                            <route.component {...props} />
                                        )} />
                                ) : (null);
                            })}
                        </Switch>
                    </div>
                    <Route component={BottomPhoneNavigator} />
                </HashRouter>
            </Suspense>
        </div>
    )
}

View: React.FC<ViewProps> = ({ component, layout, ...props }) => {
  const Layout = useMemo(() => {
    if (layout === 'fill') {
      return FillLayout;
    }

    return MainLayout;
  }, [layout]);
  const render = useMemo<React.FC<RouteComponentProps>>(
    () => (routeProps) =>
      (
        <Layout>
          <Suspense fallback={<Spinner />}>{createElement(component!, routeProps)}</Suspense>
        </Layout>
      ),
    [component, Layout],
  );

  return <Route {...props} render={render} />;
}

public render() {
        return <Suspense fallback={""}><AceEditor
            width="100%"
            mode="json"
            theme="textmate"
            enableLiveAutocompletion={ true }
            showPrintMargin={ false }
            showGutter= { true }            
            value={ this.props.content }
            highlightActiveLine={ true }
            readOnly={ true }
            editorProps={
                {
                    $blockScrolling: Infinity,
                }
            }					
            name="CodeView"
        /></Suspense> ;
    }

SuspenseWrap: React.FC<LazyComponentPropsWithComponent> = (props) => {
  const { component: Comp, onError, fallback, ...rest } = props;

  return Comp ? (
    <ErrorBoundary onError={onError}>
      <Suspense fallback={fallback || null}>
        <Comp {...rest} />
      </Suspense>
    </ErrorBoundary>
  ) : null;
}

private renderClient() {
    return (
      <LazySuspenseContext.Provider value={this.state}>
        <Suspense fallback={this.renderFallback(false)}>
          {this.props.children}
        </Suspense>
        {(!this.mounted || this.hydrationFallback) && this.renderFallback(true)}
      </LazySuspenseContext.Provider>
    );
  }

ReactDOM.render(
  <React.StrictMode>
    <AuthWrapper>
      <ApolloWrapper>
        <ThemeProvider theme={theme}>
          <CssBaseline>
            <Container maxWidth="sm" style={{ marginTop: "30px" }}>
              <Suspense fallback={<FishbowlLoading />}>
                <App />
              </Suspense>
            </Container>
          </CssBaseline>
        </ThemeProvider>
      </ApolloWrapper>
    </AuthWrapper>
  </React.StrictMode>,
  document.getElementById("root")
)

function App() {
    return (
        <RelayEnvironmentProvider environment={environment}>
            <Suspense fallback={
                <div className={css({textAlign: 'center'})}>
                    <Spin tip="Loading..."/>
                </div>
            }>
                <Row gutter={20}>
                    <Col span={12}>
                        <DepartmentList/>
                    </Col>
                    <Col span={12}>
                        <EmployeeList/>
                    </Col>
                </Row>
            </Suspense>
        </RelayEnvironmentProvider>
    );
}

/**
 * A component that displays logs in a scrollable text area.
 *
 * The LogViewer has support for search and filtering, as well as displaying
 * text content with ANSI color escape codes.
 *
 * Since the LogViewer uses windowing to avoid rendering all contents at once, the
 * log is sized automatically to fill the available vertical space. This means
 * it may often be needed to wrap the LogViewer in a container that provides it
 * with a fixed amount of space.
 *
 * @public
 */
export function LogViewer(props: LogViewerProps) {
  const { Progress } = useApp().getComponents();
  return (
    <Suspense fallback={<Progress />}>
      <RealLogViewer {...props} />
    </Suspense>
  );
}

App: FC = () => {
  return (
    <UserProvider>
      <GlobalLayout>
        <Suspense fallback={null}>
          {useRoutes(pageRoutes)}
        </Suspense>
      </GlobalLayout>
    </UserProvider>
  )
}

function AppComponent(props: { history: History }): React.ReactElement {
  return (
    <ConnectedRouter history={props.history}>
      <Head />
      <Layout history={props.history}>
        <AppAlertGroup />
        <Suspense fallback={Fallback}>
          <Switch>
            <Routes />
            <Redirect path='*' to='/' />
          </Switch>
        </Suspense>
      </Layout>
    </ConnectedRouter>
  );
}

ReactDOM.render(
  <SidebarProvider>
    <Suspense fallback={<ThemedSuspense />}>
      <Windmill theme={Theme} dark={false}>
        <App />
      </Windmill>
    </Suspense>
  </SidebarProvider>,
  document.getElementById("root")
);

// @ts-expect-error PinoutDiagrams does not exist of course.
window.PinoutDiagrams = {
  render: (
    root: ReactDOM.Container,
    { ics, maxWidth }: { ics?: string[]; maxWidth?: string }
  ) => {
    ReactDOM.render(
      <React.StrictMode>
        {React.createElement(
          shadowRoot["div"]!,
          {},
          <style>
            {css}
            {`.wrapper {
             max-width: ${maxWidth !== undefined ? maxWidth : "100%"}
           }`}
          </style>,
          <App ics={Array.isArray(ics) ? ics : []} />
        )}
        {process.env.NODE_ENV === "development" && (
          <Suspense fallback={null}>
            <LagRadar />
          </Suspense>
        )}
      </React.StrictMode>,
      root
    );
  },
};