Running JS-Based Loading Animation While Webpack Bundle Loads

Question

TLDR: My load animation (written in JS) won't play while my Webpack bundle loads, which defeats the load animation's purpose. I'm looking for a way to make both happen in parallel.

I'm building a webpage whose body is a React application compiled into an increasingly large Webpack bundle. (I know I should hop on the lazy loading train; for now, the bundle is just one monolithic landing page.) I implemented a loading animation for the page that loops over a series of SVG frames, and for a long time, it's worked seemingly perfectly, but adding a Redux store seems to have pushed it over the edge. Now, whenever I reload the page, the animation freezes for about 10 seconds while the bundle loads, and only then starts playing just as the React application calls the loader's callback and the animation fades out.

Here's the rough structure of my page:

<head>
  <!--Meta info-->
  <script>/*Handles favicon color based on light/dark mode preference of browser*/</script>
  <!--Stylesheets-->
  <script>/*Handles debug info for React DevTools*/</script>
</head>
<body>
  <div id="loader-container">
    <div id="loader">
      <div id="loader-text"><!--Contains splash text that's meant to cycle over time--></div>
      <div id="loader-character-container"><!--Contains SVG whose contents are meant to cycle over time--></div>
  </div>
  <script id="run-load-animation">/*Handles SVG and text animation*/</script>

  <div id="root"><!--Where React will do all of its rendering--></div>
  <script src="bundle.js" onload="bundleLoaded(event)"></script>
</body>

#run-load-animation is what should be running while bundle.js is loaded.

What I've tried:

I changed my original use of setInterval in that script to requestAnimationFrame , but that made no difference.
If I place print statements before and after the line of code that should start the animation, there seems to be around a 10 second delay between then they're printed, during which time the animation does not play. There shouldn't be a delay there at all.
I replaced my original loading animation script with an infinitely-running setInterval that just prints a message. Its messages to the console demonstrate the same approximately 10-second pause while bundle.js loads. This leads me to believe that it's not my animation logic that's faulty.

Based on this handy article on the HTML page load lifecycle , it looks like the inevitable is happening: while bundle.js loads, all other scripts are halted in their tracks . I tried async and defer on the script tag for bundle.js as that article suggests, but no luck. Given that JS is single-threaded, I'm concerned there's no way around this but to use a pure CSS animation or maybe a GIF, but I'm reaching out here in search of a better alternative.

Is there any way to ensure that my JS code will continue running the animation script while bundle.js loads?

Answer 1

I highly suggest you use a CSS loading animation for several reasons:

The React render (and hydrate) method runs all it's javascript code at once. That why all javascript code is frozen in the mean time.
Any external script executed at pageload will also block your javascript animation. Even when you find a solution to the React render method.
And even when you execute your React javascript code is multiple parts via for example setTimeout you will at best get a choppy animation.

Because CSS animations are GPU accelerated (on most devices) so they can run independent from any CPU load. All javascript code is being downloaded, parsed and execute on the CPU. Any other CPU work for the browser will make your javascript animation choppy.

Running JS-Based Loading Animation While Webpack Bundle Loads

Question

1 answers

solution1
0 2020-08-19 00:15:28

Running JS-Based Loading Animation While Webpack Bundle Loads

Question

1 answers

solution1 0 2020-08-19 00:15:28

solution1
0 2020-08-19 00:15:28