Have a static loading screen in index.html

[rithviknishad]

CARE loading animation (similar to one which we have inside the app) should be shown while the js files are being fetched.

Refer #6012 for the first attempt on solving this.

[jainvedant392]

Hey @rithviknishad, is this issue open to work on? I would like to contribute to it.

[rithviknishad]

Hey @jainvedant392 Yes, it's open for contribution!

[jainvedant392]

Sure, thanks a lot.
Could you please provide a little idea on how to approach this issue?

[rithviknishad]

The index.html should show the CARE loading element (similar to the Loading component we have, see this for example implementation of it already done).

And this should be shown while the index.js is being fetched / ReactDOM.render() is executed.

Attaching some references that might help:

• https://stackoverflow.com/a/40989121/7887936

[jainvedant392]

Sure. That was a lot help. Will try to resolve this soon.

[jainvedant392]

Hello @rithviknishad, extremely sorry for being inactive for so many days due to some unavoidable circumstances.

[jainvedant392]

But I have been working for this issue for some days and reading the code of the repo as well.

[jainvedant392]

I had a doubt, since we have used "Suspense" from 'react' in App.tsx, which configures the loading screen, so why we have have to integrate it in the index.html.

[jainvedant392]

And to do the same, I might need to disable the effect of "Suspense", am I allowed to do so?

[rithviknishad]

Have you tried removing suspense? Didn't it break?
We have lazy-loaded components inside suspense.

Also is there a relation between suspense and this issue? This issue is about having a loading element in the index.html before react takes over / rewrites out that element.

[jainvedant392]

Ok I think I got what you are saying, so basically, I just have to configure a Loader in index.html, which would be same as the Loading component. Am I right?

[jainvedant392]

I can place the Loader inside the "root" div, which would afterwards be overwritten by the loaded React.

[rithviknishad]

Yes, that's what the previous PR attempted.

[jainvedant392]

Ok, thanks a lot.