Noticeable load lag with SVG styling in Gatsby. How could I optimize the loading?

Question

I'm using the oninitialclientrender from Gatsby the Gatsby API and @TheWeeezel's method from Show overlay only once on page entrance (not route change). HowTo? to use a React component as a loading screen for my site. The issue is that there is a noticable delay on the initial loading of the svg's styling needed for positioning and fills. I've tried inline styling instead of loading the styling using a css file, but it still causes the same delay. Here is my code from my custom html.js file.

<div
      id="___loader"
      key={`loader`}
      style={{
        background: "#0F2027",
        height: "100%",
        width: "100%",
        margin: "0",
        padding: "0",
      }}
    >
      <LoadingAssets></LoadingAssets>
    </div>

Here is the code from my gatsby-browser.js file too.

exports.onInitialClientRender = () => {
  console.log("loaded")

  setTimeout(() => {
    document.getElementById("___loader").style.opacity = "0"
    console.log("loader changed.")
  }, 1000)
  setTimeout(() => {
    document.getElementById("___loader").style.display = "none"
    console.log("loader removed")
  }, 2000)
  setTimeout(() => {
    document.getElementById("___gatsby").style.display = "block"
  }, 2000)
  setTimeout(() => {
    document.getElementById("___gatsby").style.opacity = 1
  }, 3000)
}

How could I optimize this better so that the delay isn't noticeable on the svg styling?

Starting to take some of the sub-components out of the LoadingAssets component and implementing more inline styling on the html.js page. It seems to be helping a little. — Grant Montgomery, Jul 13 '20 at 19:05

score -1 · Answer 1 · answered Jul 15 '20 at 09:23

Instead of using a React component to render the SVG, you could just put the SVG in your custom html.js file. Something like this:

// html.js

export default () => {
    return (
        <html {...this.props.htmlAttributes}>
            <head>
                <meta charSet="utf-8" />
                <meta httpEquiv="x-ua-compatible" content="ie=edge" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, shrink-to-fit=no"
                />
                {this.props.headComponents}
                <style>
                    #___loader { /** YOUR CSS FOR THE LOADER */ }
                </style>
            </head>
            <body {...this.props.bodyAttributes}>
                <div id="___loader">
                    <svg ...>
                        <path ... />
                        <path ... />
                    </svg>
                </div>
                {this.props.preBodyComponents}
                <div
                    key={`body`}
                    id="___gatsby"
                    dangerouslySetInnerHTML={{
                        __html: this.props.body,
                    }}
                />
                {this.props.postBodyComponents}
            </body>
        </html>
    )
}

If this is not an option for you, another option would be to hide the site entirely (using CSS) and show it back using the useEffect hook (or componentDidMount) in your SVG component. So the site would be hidden until the SVG component is mounted.

Noticeable load lag with SVG styling in Gatsby. How could I optimize the loading?

1 Answers1