bacb77a352
## Description In order to improve the first load of the applications, now we're only rendering the widget components that are [above the fold](https://en.wikipedia.org/wiki/Above_the_fold#In_web_design) right away and rendering the other widget components whenever the browser is idle. This decreases the amount of time it takes before the first paint on the screen. This is getting shipped behind a feature flag!
76 lines
2.1 KiB
TypeScript
Executable File
76 lines
2.1 KiB
TypeScript
Executable File
import React from "react";
|
|
import "./wdyr";
|
|
import ReactDOM from "react-dom";
|
|
import { Provider } from "react-redux";
|
|
import "./index.css";
|
|
import { ThemeProvider } from "styled-components";
|
|
import { appInitializer } from "utils/AppUtils";
|
|
import { Slide } from "react-toastify";
|
|
import store, { runSagaMiddleware } from "./store";
|
|
import { LayersContext, Layers } from "constants/Layers";
|
|
import AppRouter from "@appsmith/AppRouter";
|
|
import * as Sentry from "@sentry/react";
|
|
import { getCurrentThemeDetails } from "selectors/themeSelectors";
|
|
import { connect } from "react-redux";
|
|
import { AppState } from "@appsmith/reducers";
|
|
import { StyledToastContainer } from "design-system-old";
|
|
import "./assets/styles/index.css";
|
|
import "./polyfills";
|
|
import GlobalStyles from "globalStyles";
|
|
// enable autofreeze only in development
|
|
import { setAutoFreeze } from "immer";
|
|
import AppErrorBoundary from "AppErrorBoundry";
|
|
const shouldAutoFreeze = process.env.NODE_ENV === "development";
|
|
setAutoFreeze(shouldAutoFreeze);
|
|
|
|
runSagaMiddleware();
|
|
|
|
appInitializer();
|
|
|
|
function App() {
|
|
return (
|
|
<Sentry.ErrorBoundary fallback={"An error has occured"}>
|
|
<Provider store={store}>
|
|
<LayersContext.Provider value={Layers}>
|
|
<ThemedAppWithProps />
|
|
</LayersContext.Provider>
|
|
</Provider>
|
|
</Sentry.ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
class ThemedApp extends React.Component<{
|
|
currentTheme: any;
|
|
}> {
|
|
render() {
|
|
return (
|
|
<ThemeProvider theme={this.props.currentTheme}>
|
|
<StyledToastContainer
|
|
autoClose={5000}
|
|
closeButton={false}
|
|
draggable={false}
|
|
hideProgressBar
|
|
pauseOnHover={false}
|
|
transition={Slide}
|
|
/>
|
|
<GlobalStyles />
|
|
<AppErrorBoundary>
|
|
<AppRouter />
|
|
</AppErrorBoundary>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
}
|
|
const mapStateToProps = (state: AppState) => ({
|
|
currentTheme: getCurrentThemeDetails(state),
|
|
});
|
|
|
|
const ThemedAppWithProps = connect(mapStateToProps)(ThemedApp);
|
|
|
|
ReactDOM.render(<App />, document.getElementById("root"));
|
|
|
|
// expose store when run in Cypress
|
|
if ((window as any).Cypress) {
|
|
(window as any).store = store;
|
|
}
|