From e5ead303ebcf2240d4b832312581484698d0e6e8 Mon Sep 17 00:00:00 2001 From: Fred Date: Sat, 26 Dec 2020 16:25:46 -0500 Subject: [PATCH] 2.3.2 - Lazy-loading pages. Should speed up initial website load. --- package.json | 2 +- src/App.js | 35 +++++++++------ src/Artifact/ArtifactDisplay.js | 7 +-- .../CharacterDisplay/CharacterArtifactPane.js | 43 +++++++++---------- src/index.js | 3 -- 5 files changed, 47 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 44c46bc225..f0302f9348 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "homepage": "https://frzyc.github.io/genshin-optimizer/", "name": "genshin-optimizer", - "version": "2.3.0", + "version": "2.3.2", "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.32", diff --git a/src/App.js b/src/App.js index fe3aa5d1be..ab58a9118b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,27 @@ import { faDiscord, faPatreon, faPaypal } from '@fortawesome/free-brands-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; -import { Col, Row } from 'react-bootstrap'; +import React, { Suspense, lazy } from 'react'; +import Card from 'react-bootstrap/Card' +import Col from 'react-bootstrap/Col' +import Row from 'react-bootstrap/Row' +import Container from 'react-bootstrap/Container' +import Spinner from 'react-bootstrap/Spinner' import Nav from 'react-bootstrap/Nav'; import Navbar from 'react-bootstrap/Navbar'; -import { - Link, Route, Switch -} from "react-router-dom"; +import { Link, Route, Switch, HashRouter } from "react-router-dom"; import './App.scss'; import './Assets/Image.scss' -import ArtifactDisplay from './Artifact/ArtifactDisplay'; -import BuildDisplay from './Build/BuildDisplay'; -import CharacterDisplay from './Character/CharacterDisplay'; import { version } from "../package.json" -import HomeDisplay from './Home/HomeDisplay'; -import FAQ from './FAQ/FAQDisplay'; import ReactGA from 'react-ga'; +const Home = lazy(() => import('./Home/HomeDisplay')) +const ArtifactDisplay = lazy(() => import('./Artifact/ArtifactDisplay')) +const CharacterDisplay = lazy(() => import('./Character/CharacterDisplay')) +const BuildDisplay = lazy(() => import('./Build/BuildDisplay')) +const FAQ = lazy(() => import('./FAQ/FAQDisplay')) function App() { return ( +
@@ -48,16 +51,21 @@ function App() { - + + + +

Loading...

+ + }> - + {/* */} - +
+ ); } diff --git a/src/Artifact/ArtifactDisplay.js b/src/Artifact/ArtifactDisplay.js index 60bbdbe6d3..fe3fc8db9f 100644 --- a/src/Artifact/ArtifactDisplay.js +++ b/src/Artifact/ArtifactDisplay.js @@ -22,12 +22,11 @@ import ReactGA from 'react-ga'; export default class ArtifactDisplay extends React.Component { constructor(props) { super(props) - DatabaseInitAndVerify(); this.state = { - artIdList: [...ArtifactDatabase.getArtifactIdList()], + artIdList: [], artToEdit: null, + ...ArtifactDisplay.initialFilter } - this.state = { ...this.state, ...ArtifactDisplay.initialFilter } ReactGA.pageview('/artifact') } static initialFilter = { @@ -74,6 +73,8 @@ export default class ArtifactDisplay extends React.Component { componentDidMount() { this.scrollRef = React.createRef() + DatabaseInitAndVerify(); + this.setState({ artIdList: ArtifactDatabase.getArtifactIdList() }) } render() { let artifacts = this.state.artIdList.map(artid => ArtifactDatabase.getArtifact(artid)).filter((art) => { diff --git a/src/Character/CharacterDisplay/CharacterArtifactPane.js b/src/Character/CharacterDisplay/CharacterArtifactPane.js index f271e1284c..e062dcfcd4 100644 --- a/src/Character/CharacterDisplay/CharacterArtifactPane.js +++ b/src/Character/CharacterDisplay/CharacterArtifactPane.js @@ -14,15 +14,16 @@ function CharacterArtifactPane(props) { //choose which one to display stats for let build = newBuild ? newBuild : equippedBuild let eleKey = Character.getElementalKey(characterKey) - const statKeys = ["hp", "atk", "def", "ele_mas", "crit_rate", "crit_dmg", "ener_rech", "heal_bonu", "phy_dmg", "phy_atk",] + const statKeys = ["hp", "atk", "def", "ele_mas", "crit_rate", "crit_dmg", "crit_multi", "ener_rech", "heal_bonu", "phy_dmg", "phy_atk",] statKeys.push(`${eleKey}_ele_dmg`) statKeys.push(`${eleKey}_ele_atk`) - const otherStatKeys = ["stam", "inc_heal", "pow_shield", "red_cd", "phy_dmg", "phy_res"] + let otherStatKeys = ["inc_heal", "pow_shield", "red_cd", "phy_dmg", "phy_res", "norm_atk_dmg", "char_atk_dmg", "skill_dmg", "burst_dmg"] Character.getElementalKeys().forEach(ele => { otherStatKeys.push(`${ele}_ele_dmg`) otherStatKeys.push(`${ele}_ele_res`) }) + otherStatKeys = otherStatKeys.filter(key => !statKeys.includes(key)) const displayStats = (statKey) => { let statVal = Character.getStatValueWithOverride(character, statKey) @@ -93,27 +94,23 @@ function CharacterArtifactPane(props) { - - - - Artifact Set Effects - - - {Object.entries(build.artifactSetEffect).map(([setKey, effects]) => - -
{Artifact.getArtifactSetName(setKey)}
- - {Object.entries(effects).map(([num, effect]) => { - return
{num}-Set {effect.text}
- })} - - - )} - - - - - + + Artifact Set Effects + + + {Object.entries(build.artifactSetEffect).map(([setKey, effects]) => + +
{Artifact.getArtifactSetName(setKey)}
+ + {Object.entries(effects).map(([num, effect]) => { + return
{num}-Set {effect.text}
+ })} + + + )} + + + {Object.values(build.artifactIds).map(artid => artid ? diff --git a/src/index.js b/src/index.js index 5c11653512..c14834e96e 100644 --- a/src/index.js +++ b/src/index.js @@ -3,16 +3,13 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; -import { HashRouter } from 'react-router-dom'; import ReactGA from 'react-ga'; ReactGA.initialize(process.env.REACT_APP_GA_TRACKINGID, { debug: process.env.NODE_ENV === "development" }); ReactDOM.render( - - , document.getElementById('root') );