Step loading to application index page

Question

I own a commercial application that is with an extremely time consuming login for the user. The connection to the Database to validate user and password, as well as the Spring Security startup take around 0.8 seconds, which is great.

The problem is the loading of the main page, which displays charts and tables and the connection to the Bank exceeds 20 seconds. The query is done at the Bean startup and only after the return, the displayed page changes. For the user, there is no feedback while this is done and it is the impression that the application has crashed.

Call from the Home Page method:

<f:metadata>
    <f:viewAction action="#{paginaInicialBean.inicializar()}"/>
</f:metadata>

I’ve done tests with @PostConstruct, javascript methods like window.onload or with the word "Defer", but all exhibit the same behavior already offered by the JSF core schema (f:).

I thought about making a load in stages, as Gmail has, but I did not succeed in the implementation. Another option would be to display my template (Top Menu) and only then call the Main Page method, so the user knows something is being loaded and if he does not want to wait, he can leave by navigating the menu.

Has anyone ever had such difficulty?

Answer 1

To do this I suggest you open the page without running the method #{paginaInicialBean.inicializar()}, and only after the page is loaded do you run an Ajax that initializes the data and updates the screen content.

To do this follow the following steps:

• Remove the <f:viewAction> tag initialization <f:metadata>
• Create a <h:commandLink> with a id any and with style="display:none" (to be invisible) to execute the method #{paginaInicialBean.inicializar()} on the tag <f:ajax>
• Tag <f:ajax> indicate which elements of the screen should be updated in the attribute render and call the method #{paginaInicialBean.inicializar()} in the attribute listener
• Finally, run a Javascript function that runs a click on <h:commandLink> when the page has been fully loaded.

Performing this the page will be accessed quickly, and after that the content will be loaded. Below is a snippet for better analysis:

<h:head>
    <script>
        //Este é o código JavaScript que irá executar e chamar o clique no seu h:commandLink quando a página tiver sido carregada
        //Note que o id do botão precisa ser o id form, dois pontos e id do botão 'idDoForm:idDoBotao'
        window.onload = function() {
            document.getElementById('pagina:botaoCarregarDados').click();
        }
    </script>
</h:head>
<h:body>
    <h:form id="pagina">
        <h:panelGroup id="conteudoDaPagina">
            <!-- Aqui ficaria o conteúdo dinâmico de sua página -->
        </h:panelGroup>            

        <!-- Abaixo fica o botão que irá carregar os dados da sua página de forma dinâmica -->
        <h:commandLink id="botaoCarregarDados" style="display: none;">
            <f:ajax listener="#{paginaInicialBean.inicializar()}" render=":conteudoDaPagina"/>
        </h:commandLink>
    </h:form>
</h:body>

You can also run some Javascript function that blocks the screen while the content is loaded, but is at your discretion.

This question has already been answered in the "original" Stackoverflow. Below is the link below the question (in English): Execute managebean method from javascript onload Event