diff --git a/TODO.md b/TODO.md index 32673db..c404e2f 100644 --- a/TODO.md +++ b/TODO.md @@ -13,5 +13,4 @@ - [ ] Reset button per tree (?) - [ ] Tooltips: - [ ] Support multiple positions for tooltip (currently only `top-right` with fallbacks based on viewport) -- [ ] [Code splitting?](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) - [ ] Move icons back under `/src` when https://github.com/facebook/create-react-app/pull/6060 is released as part of 3.0.2 \ No newline at end of file diff --git a/package.json b/package.json index 463d58e..3b39b0d 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "node-sass": "^4.12.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-loadable": "^5.5.0", "react-router-dom": "^5.0.1", "react-scripts": "3.0.1", "typescript": "3.5.3" @@ -45,6 +46,7 @@ "devDependencies": { "@types/cheerio": "^0.22.12", "@types/node-fetch": "^2.5.0", + "@types/react-loadable": "^5.5.1", "@types/request": "^2.48.2", "@welldone-software/why-did-you-render": "^3.2.1", "cheerio": "^1.0.0-rc.3", diff --git a/src/App.scss b/src/App.scss index ed8d790..dd3467f 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,10 +1,18 @@ @import "sass/config"; +.main { + min-height: 85vh; +} + +html, body { + padding: 0; + height: 0; +} + body { color: white; background-color: #111; font-family: Verdana; - margin: 0; } // Normalize etc. @@ -52,10 +60,6 @@ a { } } -.index { - min-height: 85vh; -} - .index__class-picker { margin: 2em 0; } diff --git a/src/App.tsx b/src/App.tsx index 9373cae..fc0e5e6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,30 @@ import React from 'react' import './App.scss' -import { IndexRoute } from './components/IndexRoute' -import { Playground } from './components/Playground' import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom' +import Loadable from 'react-loadable' +import { PageLoader } from './components/PageLoader' + +const LoadableHome = Loadable({ + loader: () => import('./containers/Home'), + loading: PageLoader +}) + +const LoadablePlayground = Loadable({ + loader: () => import('./containers/Playground'), + loading: PageLoader +}) const App: React.FC = () => { return ( {/* */}
- - - - +
+ + + + +
Home diff --git a/src/components/PageLoader.tsx b/src/components/PageLoader.tsx new file mode 100644 index 0000000..e899b97 --- /dev/null +++ b/src/components/PageLoader.tsx @@ -0,0 +1,16 @@ +import React, { FC } from 'react' +import { LoadingComponentProps as Props } from 'react-loadable' + +export const PageLoader: FC = ({ isLoading, pastDelay, error, retry, timedOut }) => { + const retryButton = + + if (error) { + return
Something went awry... do you wish to {retryButton}?
+ } else if (timedOut) { + return
Taking some time... {retryButton}?
+ } else if (pastDelay) { + return
Loading...
+ } else { + return null + } +} \ No newline at end of file diff --git a/src/components/IndexRoute.tsx b/src/containers/Home.tsx similarity index 87% rename from src/components/IndexRoute.tsx rename to src/containers/Home.tsx index 71eea34..cd0b1ff 100644 --- a/src/components/IndexRoute.tsx +++ b/src/containers/Home.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Calculator } from './Calculator' -import { ClassPicker } from './ClassPicker' +import { Calculator } from '../components/Calculator' +import { ClassPicker } from '../components/ClassPicker' import { match } from 'react-router-dom' import { RouteComponentProps } from 'react-router' import { decodeKnownTalents } from '../lib/tree' @@ -13,7 +13,7 @@ interface Props extends RouteComponentProps { }> } -export class IndexRoute extends React.PureComponent { +export default class Home extends React.PureComponent { static whyDidYouRender = true componentDidMount() { diff --git a/src/components/Playground.scss b/src/containers/Playground.scss similarity index 100% rename from src/components/Playground.scss rename to src/containers/Playground.scss diff --git a/src/components/Playground.tsx b/src/containers/Playground.tsx similarity index 93% rename from src/components/Playground.tsx rename to src/containers/Playground.tsx index 9eac8a4..c488168 100644 --- a/src/components/Playground.tsx +++ b/src/containers/Playground.tsx @@ -1,13 +1,13 @@ import './Playground.scss' import React, { FC } from 'react' -import { ClassPicker } from './ClassPicker' +import { ClassPicker } from '../components/ClassPicker' import { RouteComponentProps } from 'react-router' -import { Icon } from './Icon' -import { Tooltip } from './Tooltip' -import { Talent } from './Talent' +import { Icon } from '../components/Icon' +import { Tooltip } from '../components/Tooltip' +import { Talent } from '../components/Talent' import { talentsById } from '../data/talents' import { Map } from 'immutable' -import { SpellTooltip } from './SpellTooltip'; +import { SpellTooltip } from '../components/SpellTooltip'; import classNames from 'classnames' interface Props extends RouteComponentProps { @@ -48,7 +48,7 @@ const Section: FC = (props) => {
} -export class Playground extends React.PureComponent { +export default class Playground extends React.PureComponent { static whyDidYouRender = true state = { diff --git a/yarn.lock b/yarn.lock index 12124ee..865b9c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1238,6 +1238,11 @@ "@svgr/plugin-svgo" "^4.0.3" loader-utils "^1.1.0" +"@types/anymatch@*": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a" + integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA== + "@types/babel__core@^7.1.0": version "7.1.2" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f" @@ -1354,6 +1359,14 @@ dependencies: "@types/react" "*" +"@types/react-loadable@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@types/react-loadable/-/react-loadable-5.5.1.tgz#f04a262f16e9f088098ddad1aa50682ad0984aa7" + integrity sha512-PSmh6IT9vHeO9QjhApMMiJ65T0Amrpf3fom+04ur872IdgCZK9MzjeN3Q11bzgQMkrV448sbT8WopQw9o0LX1g== + dependencies: + "@types/react" "*" + "@types/webpack" "*" + "@types/react-router-dom@^4.3.4": version "4.3.4" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.4.tgz#63a7a8558129d2f4ff76e4bdd099bf4b98e25a0d" @@ -1394,11 +1407,34 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/tapable@*": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370" + integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ== + "@types/tough-cookie@*": version "2.3.5" resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-2.3.5.tgz#9da44ed75571999b65c37b60c9b2b88db54c585d" integrity sha512-SCcK7mvGi3+ZNz833RRjFIxrn4gI1PPR3NtuIS+6vMkvmsGjosqTJwRt5bAEFLRz+wtJMWv8+uOnZf2hi2QXTg== +"@types/uglify-js@*": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082" + integrity sha512-SudIN9TRJ+v8g5pTG8RRCqfqTMNqgWCKKd3vtynhGzkIIjxaicNAMuY5TRadJ6tzDu3Dotf3ngaMILtmOdmWEQ== + dependencies: + source-map "^0.6.1" + +"@types/webpack@*": + version "4.32.1" + resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.32.1.tgz#6e95010e806f808abd6551c112097ac09035aacf" + integrity sha512-9n38CBx9uga1FEAdTipnt0EkbKpsCJFh7xJb1LE65FFb/A6OOLFX022vYsGC1IyVCZ/GroNg9u/RMmlDxGcLIw== + dependencies: + "@types/anymatch" "*" + "@types/node" "*" + "@types/tapable" "*" + "@types/uglify-js" "*" + source-map "^0.6.0" + "@types/yargs@^12.0.2", "@types/yargs@^12.0.9": version "12.0.12" resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916" @@ -8180,7 +8216,7 @@ prompts@^2.0.1: kleur "^3.0.2" sisteransi "^1.0.0" -prop-types@^15.6.2: +prop-types@^15.5.0, prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8412,6 +8448,13 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== +react-loadable@^5.5.0: + version "5.5.0" + resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4" + integrity sha512-C8Aui0ZpMd4KokxRdVAm2bQtI03k2RMRNzOB+IipV3yxFTSVICv7WoUr5L9ALB5BmKO1iHgZtWM8EvYG83otdg== + dependencies: + prop-types "^15.5.0" + react-router-dom@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"