feature: lazy loading navbar items

jcw780 · Jun 25, 2020 · 2a8ce02 · 2a8ce02
1 parent f759377
commit 2a8ce02
Showing 1 changed file with 32 additions and 22 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import {Nav, Navbar, NavDropdown} from 'react-bootstrap';
+import React, {Suspense} from 'react';
+import {Nav, Navbar, NavDropdown as ND} from 'react-bootstrap';
 
 import * as T from './commonTypes';
 
+const NavDropdown = React.lazy(() => import('react-bootstrap/NavDropdown'));
+
 class NavbarCustom extends React.Component<{links: T.linkT}>{
     state = {update: true};
     update = () => {this.setState(this.state);}
@@ -14,10 +16,8 @@ class NavbarCustom extends React.Component<{links: T.linkT}>{
     }
     private makeDropdowns = (target : T.linkKeyT) => {
         return this.props.links[target].map((link, i) => {
-            /*return <NavDropdown.Item onSelect={() => {this.scrollToRef(link[T.singleLinkIndex.ref])}} key={i}>
-                {link[T.singleLinkIndex.name]}</NavDropdown.Item>*/
-            return <NavDropdown.Item onSelect={this.makeScroller(link[T.singleLinkIndex.ref])} key={i}>
-            {link[T.singleLinkIndex.name]}</NavDropdown.Item>
+            return <ND.Item onSelect={this.makeScroller(link[T.singleLinkIndex.ref])} key={i}>
+            {link[T.singleLinkIndex.name]}</ND.Item>
         });
     };
     private scrollToTop = _ => window.scrollTo(0, 0);
@@ -26,24 +26,34 @@ class NavbarCustom extends React.Component<{links: T.linkT}>{
 <Navbar variant="dark" bg="dark" expand="lg" fixed="top">
     <Navbar.Brand onClick={this.scrollToTop}>World of Warships Ballistics Calculator</Navbar.Brand>
     <Nav className="mr-auto">
-        <NavDropdown title="Parameters" id="basic-nav-dropdown">
-            {this.makeDropdowns('parameters')}
-        </NavDropdown>
-        <NavDropdown title="Impact Charts" id="basic-nav-dropdown">
-            {this.makeDropdowns('impact')}
-        </NavDropdown>
-        <NavDropdown title="Angle Charts" id="basic-nav-dropdown">
-            {this.makeDropdowns('angle')}
-        </NavDropdown>
-        <NavDropdown title="Post-Pentration Charts" id="basic-nav-dropdown">
-            {this.makeDropdowns('post')}
-        </NavDropdown>
+        <Suspense fallback={<div>Loading...</div>}>
+            <NavDropdown title="Parameters" id="basic-nav-dropdown">
+                {this.makeDropdowns('parameters')}
+            </NavDropdown>
+        </Suspense>
+        <Suspense fallback={<div>Loading...</div>}>
+            <NavDropdown title="Impact Charts" id="basic-nav-dropdown">
+                {this.makeDropdowns('impact')}
+            </NavDropdown>
+        </Suspense>
+        <Suspense fallback={<div>Loading...</div>}>
+            <NavDropdown title="Angle Charts" id="basic-nav-dropdown">
+                {this.makeDropdowns('angle')}
+            </NavDropdown>
+        </Suspense>
+        <Suspense fallback={<div>Loading...</div>}>
+            <NavDropdown title="Post-Pentration Charts" id="basic-nav-dropdown">
+                {this.makeDropdowns('post')}
+            </NavDropdown>
+        </Suspense>
     </Nav>
     <Nav className="navbar-right">
-        <NavDropdown title="Support" id="basic-nav-dropdown" alignRight>
-            <NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics">Github</NavDropdown.Item>
-            <NavDropdown.Item href="/~https://github.com/jcw780/wows_ballistics/issues">Issues</NavDropdown.Item>
-        </NavDropdown>
+        <Suspense fallback={<div>Loading...</div>}>
+            <NavDropdown title="Support" id="basic-nav-dropdown" alignRight>
+                <ND.Item href="/~https://github.com/jcw780/wows_ballistics">Github</ND.Item>
+                <ND.Item href="/~https://github.com/jcw780/wows_ballistics/issues">Issues</ND.Item>
+            </NavDropdown>
+        </Suspense>
     </Nav>
 </Navbar>
         );