Homepage improvements (#487)

- Fix the "flash of loading spinner" visual bug, by not awaiting the fetch of the bootstrap.
- Convert the carousel images to webp, to make them significantly smaller.
- Lazyload the blog section on the homepage, so that a large video file doesnt download on every page visit.
- Convert the Runelite logo to webp, and make it smaller. (Its around 1000px, but only shows something like 50x50).
- Move the font-awesome css into the app.css file
- Remove the IE11 polyfill (internet explorer is EOL)
- Set the feature cards to have a low fetchpriority, as they are below the fold, and can impact load time of the visible images.

config-overrides.js

@@ -2,7 +2,8 @@ const {
   override,
   addWebpackAlias,
   useBabelRc,
-  useEslintRc
+  useEslintRc,
+  babelInclude
 } = require('customize-cra')
 
 const fs = require('fs')
@@ -171,5 +172,10 @@ module.exports = override(
     react: 'preact/compat',
     'react-dom': 'preact/compat'
   }),
-  addSitePlugins()
+  addSitePlugins(),
+  babelInclude([
+    path.resolve(__dirname, 'src'),
+    path.resolve(__dirname, 'node_modules/react-leaflet'),
+    path.resolve(__dirname, 'node_modules/@react-leaflet')
+  ])
 )

package.json

@@ -19,6 +19,7 @@
     "preact-router": "^3.2.1",
     "ramda": "0.27.0",
     "react-app-polyfill": "^1.0.6",
+    "react-intersection-observer": "^9.4.4",
     "react-leaflet": "^3.1.0",
     "react-redux": "^7.2.0",
     "redux": "4.0.5",

src/_data/hero.js

@@ -1,9 +1,13 @@
 module.exports = {
   title: 'RuneLite',
   url: 'https://runelite.net',
-  logo: '/img/runelite_logo_transparent.png',
+  logo: '/img/runelite_logo_transparent_small.webp',
   description: `A popular free, open-source and super fast client for Old School RuneScape`,
-  images: ['/img/carousel/1.png', '/img/carousel/2.png', '/img/carousel/3.png'],
+  images: [
+    '/img/carousel/1.webp',
+    '/img/carousel/2.webp',
+    '/img/carousel/3.webp'
+  ],
   buttons: [
     {
       link:

src/components/app.js

@@ -1,4 +1,3 @@
-import '@fortawesome/fontawesome-free/css/all.min.css'
 import { h } from 'preact'
 import { connect } from 'react-redux'
 import Router from 'preact-router'

src/components/app.scss

@@ -5,6 +5,7 @@
 @import '_variables.scss';
 @import '~bootstrap/scss/bootstrap';
 @import '~lato-font/scss/_public-api';
+@import '~@fortawesome/fontawesome-free/css/all.min.css';
 
 @font-face {
   font-family: Lato;

src/components/feature.js

@@ -4,7 +4,7 @@ import './feature.scss'
 const Feature = ({ image, title, description, link, linkAlt }) => (
   <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 mb-2">
     <div class="card">
-      <img class="card-img-top" alt={title} src={image} />
+      <img class="card-img-top" alt={title} src={image} fetchpriority="low" />
       <div class="card-body">
         <h5 class="card-title">
           {link ? (

src/polyfills.js

@@ -1,3 +1,2 @@
-import 'react-app-polyfill/ie11'
 import 'react-app-polyfill/stable'
 import 'fastestsmallesttextencoderdecoder'

src/routes/home.js

@@ -21,6 +21,7 @@ import { Link } from 'preact-router'
 import Async from '../components/async'
 import prepare from '../components/prepare'
 import { fetchBootstrap, getLatestRelease } from '../modules/bootstrap'
+import { InView } from 'react-intersection-observer'
 
 const Home = ({ commit, release, sessionCount, loggedInCount }) => (
   <Layout>
@@ -67,16 +68,24 @@ const Home = ({ commit, release, sessionCount, loggedInCount }) => (
           <h4 class="right-header">SHOW ALL NEWS</h4>
         </Link>
 
-        <Async
-          getComponent={() =>
-            latest().then(({ body }) => (
-              <div
-                class="markdown-body news-page"
-                dangerouslySetInnerHTML={{ __html: body }}
-              />
-            ))
-          }
-        />
+        <InView>
+          {({ inView, ref }) => (
+            <div ref={ref}>
+              {inView ? (
+                <Async
+                  getComponent={() =>
+                    latest().then(({ body }) => (
+                      <div
+                        class="markdown-body news-page"
+                        dangerouslySetInnerHTML={{ __html: body }}
+                      />
+                    ))
+                  }
+                />
+              ) : null}
+            </div>
+          )}
+        </InView>
       </div>
     </section>
   </Layout>
@@ -106,8 +115,7 @@ const prepareComponentData = async ({
   fetchSessionCount,
   fetchLoggedInCount
 }) => {
-  await fetchBootstrap()
-  fetchCommits()
+  fetchBootstrap().then(() => fetchCommits())
   fetchSessionCount()
   fetchLoggedInCount()
 }

src/season.js

@@ -1,3 +1,4 @@
 export const isChristmasTime = () => new Date().getMonth() === 11
-export const getChristmasImage = image =>
-  isChristmasTime() ? image.replace('.png', '_xmas.png') : image
+export const getChristmasImage = image => {
+  return isChristmasTime() ? image.replace('.webp', '_xmas.webp') : image
+}