Por Caio Franco Suarez

Em alguns casos, é inevitável fazer com que os usuários aguardem alguns instantes enquanto os dados ou a página são carregados. Mesmo que seja rápido, é importante deixá-los informados do que está acontecendo. E é aí que entra o Loader, um recurso muito útil que nos ajuda a dar um feedback na tela enquanto arquivos ou dados são carregados mas ainda não podem ser exibidos.

Situações em que é recomendado usar o loader:

  • Ao abrir o mashup (enquanto é criada a conexão entre o mashup e o qvf)
  • Ao carregar os dados pela primeira vez (como kpis e gráficos)

Neste post, mostrarei um breve tutorial de como adicionar um loader ao seu Mashup Qlik Sense. Tendo um resultado como o mostrado abaixo:

Itens necessários:

– Mashup com conexão a um QVF
– Editor de texto (utilizo Visual Studio Code)
– Conhecimentos em HTML, JS e React JS (utilizei React JS, mas você pode adaptar para outro framework, se preferir)

Tutorial

O primeiro passo é definir como será nosso Loader. Neste exemplo, vamos selecionar um de uma coleção open-source no seguinte endereço: https://tobiasahlin.com/spinkit/

Após escolher uma das opções disponíveis, clique no botão “Source” no topo da página e copie o HTML

Obs: não feche a página ainda pois em seguida iremos copiar o CSS.

Com o HTML copiado, já podemos criar nosso componente de Loader, que vai ficar mais ou menos assim:

Substitua a parte destacada em vermelho pelo HTML do loader que você copiou.

class Loader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render (){
        return <div style={{ height: 'calc(100vh - 63px)', display: "flex", alignItems:"center", justifyContent: "center"}}>
                <div class="spinner">
                    <div class="cube1"></div>
                    <div class="cube2"></div>
                </div>
            </div>;
    }
}

Agora não podemos esquecer de adicionar o CSS do loader, que irá dar movimento, definir cores, tamanho e etc. Para isso, volte na página onde copiamos o HTML, copie o CSS e cole no seu arquivo CSS do mashup.

Pronto! nosso componente de Loader está completo. Agora basta apenas identificar em quais situações devemos renderizá-lo.

O primeiro caso é quando o mashup está se conectando ao QVF mas a conexão ainda não está completa, como mostrado no exemplo a seguir.

O arquivo App.js é o primeiro arquivo Javascript a ser lido na minha aplicação e é nele que eu instancio o componente QlikConnection que cria toda a conexão e retorna o módulo do Qlik pela propriedade callback (linha 68). Portanto, através da callback é possível saber se o loader deve ou não ser exibido.

Na sua aplicação você deve ter algo parecido, então basta aplicar o mesmo conceito.

Nesse caso eu defini uma variável chamada “page” que inicialmente aponta para o Componente Loader que criamos (linha 48) e é renderizada no return do arquivo (linha 67). Então a primeira coisa que irá ser exibida na tela quando abrirmos a aplicação é o nosso Loader. Na linha 51 é feita uma verificação para ver se o componente QlikConnection já terminou de fazer a conexão com o QVF. Caso o mashup já esteja conectado ao QVF, a variável page deixa de apontar para o Loader e passa a apontar para a página que será desenhada na tela.

Agora sempre que abrirmos nosso Mashup irá aparecer este loader até que a conexão seja feita.

Pra finalizar:

Seguindo a mesma lógica, você também pode criar um loader nos objetos. Ao invés de fazer a implementação no App.js você deve fazer no componente do Objeto, onde o loader será exibido enquanto não tiver dados.

Lembre-se que você também pode customizar o CSS desse loader que criamos, ou se preferir também pode usar loaders de outras bibliotecas ou até mesmo em outros formatos, como gif ou svg.

Se você precisa desenvolver funcionalidades avançadas para Qlik Sense através de mashups ou extensões, envie um email para info@clusterdesign.com.br