First load from docker or sharedbase or project is slow

[o1lab]

• [x] All languages are loading - need to load only the required. @bcakmakoglu
• [ ] On first load
• [x] On project load
• [ ] On sharedbase load
• [ ] On sharedview load

[o1lab]

Need a spinner at the center on load of sharedbase (and also even when we load the docker for the first time)

[bcakmakoglu]

To show a loading spinner on first load seems a bit tricky right now because I can't figure out how to customize the index.html file of our Nuxt app (I asked in the Discord, let's hope for some answers because the Nuxt 3 docs doesn't have any answer to this question as far as I can tell). The loadingIndicator property in the nuxt.config.ts doesn't seem to work either, I guess it's only available in Nuxt 2 and hasn't been ported to Nuxt 3 (for whatever unknown reason); This property was usable to show a loading spinner while the Nuxt SPA is loading.

[bcakmakoglu]

For the other pages it should be enough to use the isLoading value of the current useApi composable and defer showing the Table/Page or whatever it is until isLoading is set to true.

[pranavxc]

To show a loading spinner on first load seems a bit tricky right now because I can't figure out how to customize the index.html file of our Nuxt app (I asked in the Discord, let's hope for some answers because the Nuxt 3 docs doesn't have any answer to this question as far as I can tell). The loadingIndicator property in the nuxt.config.ts doesn't seem to work either, I guess it's only available in Nuxt 2 and hasn't been ported to Nuxt 3 (for whatever unknown reason); This property was usable to show a loading spinner while the Nuxt SPA is loading.

For loading indicator we need to load a nuxt component - https://v3.nuxtjs.org/api/components/nuxt-loading-indicator/

[bcakmakoglu]

@pranavxc Sadly, no. That component is only usable for having a "loading bar" on top of the page, not while scripts are loading. Two different cases.

To extend: There is no Vue App while the scripts are loading (check your dev console and see how the <div id="__nuxt"> stays empty until all scripts have been loaded); So we can't really mount any loading indicator component inside our app. We need to mount an element outside of our main Vue App (hence we need access to the index.html file).

[dstala]

closing for now. any new observations with performance issues can be tracked under new PR