How to delay Razor app loading time for debug purposes?

I am working on a WASM application, and I am now specifically working on the loading page, i.e this part in index.html:

<body>
    <div class="dark loading-section" id="app">
        <div class="loading-content">
        </div>
    </div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
</body>

Now for debug purposes, I would like to see what is going on exactly here on loading, but without having to re-launch the app. I know I could copy paste the code on my home page but if possible I would like to simply delay the loading and work on this section.

-> Is there a way to manually delay the loading time in a blazor app ?

Solution

I suggest you could consider using the js set timeout to test with loading page and if you want this testing is just for debug purpose, I suggest you could write a check for checking the url location is localhost or not.

More details, you could refer to below codes:

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script>
        // Function to get the current environment , if it is localhost means it is for debug purposes
        function isDevelopmentMode() {
            return window.location.hostname === 'localhost';
        }

        // Conditionally delay Blazor start in debug/development mode
        if (isDevelopmentMode()) {
            console.log("Running in Development Mode - Adding delay to Blazor start.");
            setTimeout(() => {
                Blazor.start();
            }, 5000); // Delay by 5 seconds
        } else {
            Blazor.start();
        }
    </script>
</body>

result:

5 seconds for loading.