feat: lazy load components and update resume (#56)

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: Continuous Integration
 on: push
 
 jobs:
-  ci:
+  checks:
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, 'ci skip')"
     steps:

.github/workflows/release.yml

@@ -26,6 +26,6 @@ jobs:
 
           git checkout master
           npm version $VERSION_TAG --git-tag-version=false
-          git commit -am "ci: release version $VERSION_TAG [ci skip]"
+          git commit -am "chore: bump version to $VERSION_TAG [ci skip]"
           git push origin -f HEAD:release
-          git push origin HEAD:master
+          git push origin -f HEAD:master

package.json

@@ -5,6 +5,7 @@
   "version": "3.0.0",
   "author": "Alex Xie <[email protected]>",
   "dependencies": {
+    "@loadable/component": "^5.13.1",
     "gatsby": "^2.24.3",
     "gatsby-image": "^2.2.26",
     "gatsby-plugin-alias-imports": "^1.0.5",
@@ -32,6 +33,7 @@
     "styled-components": "^4.4.0"
   },
   "devDependencies": {
+    "@types/loadable__component": "^5.13.0",
     "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "@types/react-helmet": "^5.0.11",

src/pages/index.tsx

@@ -1,50 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
+import loadable from "@loadable/component";
 
 import PageWrapper from "~components/PageWrapper";
 import LandingSection from "~sections/landing";
 
-const importFeatured = () =>
-  import("../sections/featured").then(component => component.default);
-const importAbout = () =>
-  import("../sections/about").then(component => component.default);
-const importShowcase = () =>
-  import("../sections/showcase").then(component => component.default);
-const importFooter = () =>
-  import("../components/Footer").then(component => component.default);
-
-const IndexPage = () => {
-  const [FeaturedSection, setFeaturedSection] = useState<React.FC | null>(null);
-  const [AboutSection, setAboutSection] = useState<React.FC | null>(null);
-  const [ShowcaseSection, setShowcaseSection] = useState<React.FC | null>(null);
-  const [FooterSection, setFooterSection] = useState<React.FC | null>(null);
-
-  useEffect(() => {
-    const loadComponents = async () => {
-      const featuredSection = await importFeatured();
-      setFeaturedSection(featuredSection);
-
-      const aboutSection = await importAbout();
-      setAboutSection(aboutSection);
-
-      const showcaseSection = await importShowcase();
-      setShowcaseSection(showcaseSection);
-
-      const footerSection = await importFooter();
-      setFooterSection(footerSection);
-    };
-
-    loadComponents();
-  }, []);
-
-  return (
-    <PageWrapper>
-      <LandingSection />
-      {FeaturedSection}
-      {AboutSection}
-      {ShowcaseSection}
-      {FooterSection}
-    </PageWrapper>
-  );
-};
-
+const Featured = loadable(() => import("~sections/featured"));
+const About = loadable(() => import("~sections/about"));
+const Showcase = loadable(() => import("~sections/showcase"));
+const Footer = loadable(() => import("~components/Footer"));
+
+const IndexPage = () => (
+  <PageWrapper>
+    <LandingSection />
+    <Featured />
+    <About />
+    <Showcase />
+    <Footer />
+  </PageWrapper>
+);
 export default IndexPage;