The starting of react app is based on the main bundle download. React app only starts after the main bundle being downloaded in the browser. This is even true in case of lazy loading architecture. But the fact is we cannot exactly state the name of any bundles. Because webpack will add a hash value at the end of each bundle at the time when you run 'npm run build' command. Of course we can avoid that by changing hash settings, but it will seriously affect the cache data problem in the Browser. Browsers might not take the new version because of the same bundle name. . we need a webpack + js + CSS approach to handle this situation.
change the public/index.html as below
<!DOCTYPE html>_x000D_
<html lang="en" xml:lang="en">_x000D_
_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">_x000D_
<meta name="theme-color" content="#000000">_x000D_
<!--_x000D_
manifest.json provides metadata used when your web app is added to the_x000D_
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/_x000D_
-->_x000D_
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">_x000D_
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">_x000D_
<style>_x000D_
.percentage {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
width: 150px;_x000D_
height: 150px;_x000D_
border: 1px solid #ccc;_x000D_
background-color: #f3f3f3;_x000D_
-webkit-transform: translate(-50%, -50%);_x000D_
-ms-transform: translate(-50%, -50%);_x000D_
transform: translate(-50%, -50%);_x000D_
border: 1.1em solid rgba(0, 0, 0, 0.2);_x000D_
border-radius: 50%;_x000D_
overflow: hidden;_x000D_
display: -webkit-box;_x000D_
display: -ms-flexbox;_x000D_
display: flex;_x000D_
-webkit-box-pack: center;_x000D_
-ms-flex-pack: center;_x000D_
justify-content: center;_x000D_
-webkit-box-align: center;_x000D_
-ms-flex-align: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.innerpercentage {_x000D_
font-size: 20px;_x000D_
}_x000D_
</style>_x000D_
<script>_x000D_
function showPercentage(value) {_x000D_
document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";_x000D_
}_x000D_
var req = new XMLHttpRequest();_x000D_
req.addEventListener("progress", function (event) {_x000D_
if (event.lengthComputable) {_x000D_
var percentComplete = event.loaded / event.total;_x000D_
showPercentage(percentComplete)_x000D_
// ..._x000D_
} else {_x000D_
document.getElementById('percentage').innerHTML = "Loading..";_x000D_
}_x000D_
}, false);_x000D_
_x000D_
// load responseText into a new script element_x000D_
req.addEventListener("load", function (event) {_x000D_
var e = event.target;_x000D_
var s = document.createElement("script");_x000D_
s.innerHTML = e.responseText;_x000D_
document.documentElement.appendChild(s);_x000D_
document.getElementById('parentDiv').style.display = 'none';_x000D_
_x000D_
}, false);_x000D_
_x000D_
var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";_x000D_
req.open("GET", bundleName);_x000D_
req.send();_x000D_
_x000D_
</script>_x000D_
<!--_x000D_
Notice the use of %PUBLIC_URL% in the tags above._x000D_
It will be replaced with the URL of the `public` folder during the build._x000D_
Only files inside the `public` folder can be referenced from the HTML._x000D_
_x000D_
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will_x000D_
work correctly both with client-side routing and a non-root public URL._x000D_
Learn how to configure a non-root public URL by running `npm run build`._x000D_
-->_x000D_
_x000D_
<title>App Name</title>_x000D_
<link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<noscript>_x000D_
You need to enable JavaScript to run this app._x000D_
</noscript>_x000D_
<div id="parentDiv" class="percentage">_x000D_
<div id="percentage" class="innerpercentage">loading</div>_x000D_
</div>_x000D_
<div id="root"></div>_x000D_
<!--_x000D_
This HTML file is a template._x000D_
If you open it directly in the browser, you will see an empty page._x000D_
_x000D_
You can add webfonts, meta tags, or analytics to this file._x000D_
The build step will place the bundled scripts into the <body> tag._x000D_
_x000D_
To begin the development, run `npm start` or `yarn start`._x000D_
To create a production bundle, use `npm run build` or `yarn build`._x000D_
-->_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
In your production webpack configuration change the HtmlWebpackPlugin option to below
new HtmlWebpackPlugin({
inject: false,
...
You may need to use 'eject' command to get the configuration file. latest webpack might have the option to configure the HtmlWebpackPlugin without ejecting project.