Merge branch 'tonyhhyip-dynamic-page-loadiing' into dev

vote4hk · Nov 11, 2019 · 4020df8 · 4020df8
2 parents f3a4693 + fbd5977
commit 4020df8
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 script/output/*
 .DS_Store
-node_modules
+node_modules
+.idea
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
     "@babel/core": "7.2.2",
+    "@loadable/component": "^5.10.3",
     "@material-ui/core": "4.5.2",
     "@material-ui/icons": "^3.0.2",
     "@material-ui/system": "^4.3.0",

diff --git a/web/src/App.js b/web/src/App.js
@@ -2,32 +2,68 @@ import React from 'react'
 import { Route, Switch, useRouteMatch } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles/'
-import IndexPage from 'components/pages/landing'
-import ProfilePage from 'components/pages/profile'
-import DistrictPage from 'components/pages/district'
-import DistrictListPage from 'components/pages/district/list'
-import BattleGroundPage from 'components/pages/battleground'
-import DisclaimerPage from 'components/pages/disclaimer'
-import AboutDCPage from 'components/pages/about/dc'
-import NotfoundPage from 'components/pages/notfound'
-import SupportUsPage from 'components/pages/support-us'
+import loadable from '@loadable/component'
 import ApolloClient from 'apollo-boost'
 import { ApolloProvider } from 'react-apollo'
 import theme from 'ui/theme'
 import './App.css'
 import Box from '@material-ui/core/Box'
 import styled from 'styled-components'
-import MobileAppBar from 'components/organisms/MobileAppBar'
-import ShareButton from 'components/organisms/ShareButton'
-import Footer from 'components/organisms/Footer'
 import { ContextStoreProvider } from 'ContextStore'
 import withTracker from './WithTracker'
-import SearchDrawer from 'components/pages/SearchDrawer'
-import DistrictOverviewPage from 'components/pages/district/overview'
-import DistrictAllPage from 'components/pages/district/all'
-import GlobalDisclaimer from 'components/organisms/GlobalDisclaimer'
-import { fireEvent } from 'utils/ga_fireevent'
 import i18n from 'i18n'
+import { fireEvent } from 'utils/ga_fireevent'
+
+const IndexPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/landing')
+)
+const ProfilePage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/profile')
+)
+const DistrictPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district')
+)
+const DistrictListPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/list')
+)
+const BattleGroundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/battleground')
+)
+const DisclaimerPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/disclaimer')
+)
+const AboutDCPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/about/dc')
+)
+const NotfoundPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/notfound')
+)
+const SupportUsPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/support-us')
+)
+const DistrictOverviewPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/overview')
+)
+const DistrictAllPage = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/district/all')
+)
+
+const MobileAppBar = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/MobileAppBar')
+)
+const Footer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/Footer')
+)
+const SearchDrawer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/pages/SearchDrawer')
+)
+const GlobalDisclaimer = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/GlobalDisclaimer')
+)
+
+const ShareButton = loadable(() =>
+  import(/* webpackPrefetch: true */ 'components/organisms/ShareButton')
+)
 
 const client = new ApolloClient({
   uri: process.env.REACT_APP_GRAPHQL_URI,

diff --git a/web/src/components/organisms/Footer.js b/web/src/components/organisms/Footer.js
@@ -41,6 +41,9 @@ const LinkBox = styled(Box)`
 function Footer(props) {
   const { t } = useTranslation()
   const currentLanguage = getCurrentLanguage()
+  React.useEffect(() => {
+    window.FB.XFBML.parse()
+  }, [])
   return (
     <>
       <StyledFooter>