2.3.2

- Lazy-loading pages. Should speed up initial website load.

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",

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 (
+    <HashRouter>
     <div className="h-100 d-flex flex-column">
       <div id="content" className="flex-grow-1">
         <Navbar bg="dark" variant="dark" expand="md">
@@ -48,16 +51,21 @@ function App() {
             </ReactGA.OutboundLink>
           </Nav>
         </Navbar>
-
+          <Suspense fallback={<Container>
+            <Card bg="darkcontent" text="lightfont" className="mt-2">
+              <Card.Body>
+                <h3 className="text-center">Loading... <Spinner animation="border" variant="primary" /></h3>
+              </Card.Body>
+            </Card></Container>}>
         <Switch>
           <Route path="/artifact" component={ArtifactDisplay} />
           <Route path="/character" component={CharacterDisplay} />
           <Route path="/build" component={BuildDisplay} />
           <Route path="/faq" component={FAQ} />
-          <Route path="/" component={HomeDisplay} />
+              <Route path="/" component={Home} />
           {/* <Route exact path="/" component={Home} /> */}
         </Switch>
-
+          </Suspense>
       </div>
       <Nav id="footer" className="bg-dark">
         <Row className="w-100 ml-0 mr-0 mb-2 text-light d-flex justify-content-between">
@@ -70,6 +78,7 @@ function App() {
         </Row>
       </Nav>
     </div>
+    </HashRouter>
   );
 }
 

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) => {

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) {
       <Col>
         <Row>
           <Col sm={6} lg={4} className="mb-3">
-            <Row className="h-100">
-              <Col xs={12} className="d-flex flex-column">
-                <Card className="flex-grow-1" bg="lightcontent" text="lightfont">
-                  <Card.Header>Artifact Set Effects</Card.Header>
-                  <Card.Body>
-                    <Row>
-                      {Object.entries(build.artifactSetEffect).map(([setKey, effects]) =>
-                        <Col key={setKey} xs={12} className="mb-3">
-                          <h5>{Artifact.getArtifactSetName(setKey)}</h5>
-                          <Row>
-                            {Object.entries(effects).map(([num, effect]) => {
-                              return <Col key={num} xs={12}><h6><Badge variant="success">{num}-Set</Badge> <span>{effect.text}</span></h6></Col>
-                            })}
-                          </Row>
-                        </Col>
-                      )}
-                    </Row>
-                  </Card.Body>
-                </Card>
-              </Col >
-            </Row>
+            <Card className="h-100 d-flex flex-column" bg="lightcontent" text="lightfont">
+              <Card.Header>Artifact Set Effects</Card.Header>
+              <Card.Body className="flex-grow-1">
+                <Row>
+                  {Object.entries(build.artifactSetEffect).map(([setKey, effects]) =>
+                    <Col key={setKey} xs={12} className="mb-3">
+                      <h5>{Artifact.getArtifactSetName(setKey)}</h5>
+                      <Row>
+                        {Object.entries(effects).map(([num, effect]) => {
+                          return <Col key={num} xs={12}><h6><Badge variant="success">{num}-Set</Badge> <span>{effect.text}</span></h6></Col>
+                        })}
+                      </Row>
+                    </Col>
+                  )}
+                </Row>
+              </Card.Body>
+            </Card>
           </Col>
           {Object.values(build.artifactIds).map(artid =>
             artid ? <Col sm={6} lg={4} key={artid} className="mb-3 testname">

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(
   <React.StrictMode>
-    <HashRouter>
       <App />
-    </HashRouter>
   </React.StrictMode>,
   document.getElementById('root')
 );