'Showing a loader while waiting for server-side code (without a blank page)

I've tried to make a loader for every page but failed.

I want to show the loader before completing server-side jobs: [Loader] -> [Target page].

However, HTML was loaded after the server-side jobs, so I could see the loader after a blank page: [Blank page] -> [Loader] -> [Target page].

Here is example HTML code (sample.html),

<body>
    <!-- loading image  -->
    <div id="loading">
        <img id="loading-image" src="/img/loading.gif" alt="Loading..."/>
    </div>
    
    <section class="content">
        <span th:text="${data_list}"></span>
    </section>

    <script type="text/javascript">
        $(window).load(function() {
             $('#loading').hide();
            });
    </script>
</body>

and Java code (Controller.java).

@RequestMapping(
    method = RequestMethod.GET,
    path = "sample"
)
String hosts(Model model) {
    model.addAttribute("data_list", service.getAllData());
    return "sample";
}

service.getAllData() takes a long time, so I want to show users loader before service.getAllData() is completed. However, the current state is that [Blank page] -> [Loader] -> [Target page].

Is there any fancy way to show the loader first, and then show the target page after the server-side jobs for every page? That is [Loader] -> [Target page].

javascriptjavahtmlspring-bootthymeleaf


Solution 1:[1]

You can have loading display as block by default and, content desplay as none.

Once ajax is finished just hide the loading and show the content.

Also, Make sure you cover the whole page with loading.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VISHAL KUMAR

Related Questions