2

I'm coding an online game that loads levels dynamically with the following line:

import('/path/level.js')
.catch((error) => { reject(error); })
.then((data) => {
  // Display the new level
  // ...
}

This is a single page application, and the levels are loaded dynamically. The levels are heavy Webpack bundles. I would like to display a progress bar during the import.

Is there a way to get the status of the import ? Like a percentage or a number of bytes loaded?

Fifi
  • 3,360
  • 2
  • 27
  • 53
  • See also ["How to display a progress bar while loading single bundled javascript file by webpack?"](https://stackoverflow.com/q/35195543/15261914) – Darryl Noakes Jul 13 '23 at 17:35

1 Answers1

0

No, There is no built in function to achieve this approach, but at least you can show a loading until your component load or show a percentage bar and increase it randomly and when component loaded set the percentage bar to 100%. see this package, it may also be helpful https://www.npmjs.com/package/react-loadable

Paiman Rasoli
  • 1,088
  • 1
  • 5
  • 15