feat: use lazy load to load management pages (#2752)

This commit is contained in:
DacongDA
2024-02-27 22:31:02 +08:00
committed by GitHub
parent a5499219d1
commit b0d87f60ae
2 changed files with 49 additions and 43 deletions

View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React, {Component} from "react";
import React, {Component, Suspense, lazy} from "react";
import "./App.less";
import {Helmet} from "react-helmet";
import * as Setting from "./Setting";
@ -30,7 +30,7 @@ import AuthCallback from "./auth/AuthCallback";
import SamlCallback from "./auth/SamlCallback";
import i18next from "i18next";
import {withTranslation} from "react-i18next";
import ManagementPage from "./ManagementPage";
const ManagementPage = lazy(() => import("./ManagementPage"));
const {Footer, Content} = Layout;
import {setTwoToneColor} from "@ant-design/icons";
@ -366,47 +366,49 @@ class App extends Component {
<FloatButton.BackTop />
<CustomGithubCorner />
{
<Layout id="parent-area">
<ManagementPage
account={this.state.account}
uri={this.state.uri}
themeData={this.state.themeData}
themeAlgorithm={this.state.themeAlgorithm}
selectedMenuKey={this.state.selectedMenuKey}
requiredEnableMfa={this.state.requiredEnableMfa}
menuVisible={this.state.menuVisible}
logo={this.state.logo}
onChangeTheme={this.setTheme}
onClick = {this.onClick}
onfinish={() => {
this.setState({requiredEnableMfa: false});
}}
openAiAssistant={() => {
this.setState({
isAiAssistantOpen: true,
});
}}
setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => {
this.setState({
themeAlgorithm: nextThemeAlgorithm,
logo: this.getLogo(nextThemeAlgorithm),
});
localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
}}
setLogoutState={() => {
this.setState({
account: null,
themeAlgorithm: ["default"],
});
}}
/>
{
this.renderFooter()
}
{
this.renderAiAssistant()
}
</Layout>
<Suspense fallback={<div>loading</div>}>
<Layout id="parent-area">
<ManagementPage
account={this.state.account}
uri={this.state.uri}
themeData={this.state.themeData}
themeAlgorithm={this.state.themeAlgorithm}
selectedMenuKey={this.state.selectedMenuKey}
requiredEnableMfa={this.state.requiredEnableMfa}
menuVisible={this.state.menuVisible}
logo={this.state.logo}
onChangeTheme={this.setTheme}
onClick = {this.onClick}
onfinish={() => {
this.setState({requiredEnableMfa: false});
}}
openAiAssistant={() => {
this.setState({
isAiAssistantOpen: true,
});
}}
setLogoAndThemeAlgorithm={(nextThemeAlgorithm) => {
this.setState({
themeAlgorithm: nextThemeAlgorithm,
logo: this.getLogo(nextThemeAlgorithm),
});
localStorage.setItem("themeAlgorithm", JSON.stringify(nextThemeAlgorithm));
}}
setLogoutState={() => {
this.setState({
account: null,
themeAlgorithm: ["default"],
});
}}
/>
{
this.renderFooter()
}
{
this.renderAiAssistant()
}
</Layout>
</Suspense>
}
</React.Fragment>
);