[Loading Screen]: display a loading screen till all the content is loaded

[jaison-jai-john]

Is your feature request related to a problem? Please describe.

with the new dynamic content added the pages are displaying "slow loading". This is because of how the dynamic loading is implemented. what it does is basically sends a fetch request to the html part of the component and then parses it into "components", "scrips" and "styles" and then injects them into the active webpage.

as you can imagine the fetch requests even though they are happening in parallel take time to resolve. approx 2-3 seconds. during this 2 to 3 seconds the original content of the webpage is displayed. for some reason almost every single important css for individual webpages have been placed in styles.css which was meant to be universal file for commonly used styles.

this styles.css is currently being dynamically loaded in to avoid having to link it on every single html page manually.

Describe the solution you'd like.

the solution that I suggest is to implement a loading screen. make the body invisible at the start and when body starts loading inject a loading screen component that displays till all the original and dynamically loaded content finish loading.

when all the content has finished loading the loading screen will be hidden.

Describe alternatives you've considered.

manually adding in styles.css in each page

the "barebones" or "loading" feeling given is because the styles.css is loaded dynamically. the dynamically loaded components are only added in after the original content has been loading. meaning the original content has no style till the style.css has been injected.

a fix for this is to add styles.css on the head of each html page. this will give a semblance of style to the content so even if the loading process is displayed it wont that ugly.

why this was not my preferred solution

the styles.css is a mess right now and has a lot of styles that are meant for specific webpages and instead of having universal styles only. In the case that the user is experiencing network issue, even if styles.css has been added into the head the loading feeling will continue because the css might take time to be fetched. This might also become a hassle down the line once we start refactoring styles.css which is inevitable.

implementing a loading screen with minimal html and css will help hide the process in any situation and can help cover edge cases.

Additional context.

No response

Show us the magic with screenshots

Checklist

• [X] I have checked the Existing Issues
• [X] I have read the Contributing Guidelines
• [X] I want to work on this issue. (optional)

[jaison-jai-john]

the fix is ready so when assigned i can resolve conflicts and submit a PR

[aditya-bhaumik]

it is not looking good is there a different loader which can be used