Por Caio Franco Suarez
Em alguns casos, torna-se necessário fazer os usuários esperarem um pouco enquanto alguns dados recuperados ou uma página da web são carregados na tela. Mesmo que esse processo seja relativamente rápido, é importante manter o usuário informado sobre o que está acontecendo na página enquanto o conteúdo é renderizado. E é aí que entra um Loader, um recurso muito útil que ajuda os usuários a obter feedback na tela enquanto aguardam a exibição das informações desejadas.
O processo de renderizar dados do Qlik Sense dentro de um Mashup não se comporta de forma diferente, e os loaders se tornam uma ferramenta de UX útil à nossa disposição.
Situações em que é uma boa ideia usar um ‘loader’
Ao abrir o mashup pela primeira vez (por exemplo, enquanto se cria a conexão entre o mashup e o qvf); toda vez que você está carregando dados pela primeira vez (como KPIs e gráficos).
Neste post, vou mostrar um breve tutorial sobre como adicionar um loader ao seu Mashup do Qlik Sense, gerando um resultado como o mostrado abaixo:
Itens necessários
Um Mashup com uma conexão ativa a um QVF; um editor de texto (eu uso o Visual Studio Code); conhecimento em HTML, JS e React JS (programei este exemplo em ReactJS, mas você pode adaptá-lo para outro framework, se preferir).
Tutorial
O primeiro passo é definir a aparência do nosso Loader. Neste exemplo, selecionaremos um de uma coleção open-source no seguinte site: https://tobiasahlin.com/spinkit/
Depois de escolher um, clique no botão “Source” no topo da página e copie o código HTML.
Nota: não feche a página ainda, pois em seguida copiaremos o CSS.
Com o HTML copiado, agora podemos criar nosso componente Loader, que ficará mais ou menos assim:
Substitua a seção destacada em vermelho pelo código HTML do Loader que você acabou de copiar.
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>;
}
}Não se esqueça de adicionar o código CSS do loader, que dará a ele movimento, definirá suas cores, tamanho e outras propriedades visuais. Para fazer isso, volte à página de onde copiamos o HTML, copie o CSS e, por fim, cole-o no arquivo CSS do seu Mashup.
Pronto! Nosso componente Loader está pronto. Agora você só precisa identificar em quais situações é adequado renderizá-lo na tela.
O primeiro caso para fazer isso é quando o Mashup está fazendo a primeira conexão com o QVF, mas quando 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. Como tal, é o lugar onde instancio o componente QlikConnection que cria toda a conexão e retorna o módulo Qlik por meio da propriedade callback (linha 68). Portanto, é possível saber se o loader deve ser exibido ou não por meio do callback.
Na sua aplicação, você deve ter algo semelhante, então basta aplicar o mesmo conceito.
Nesse caso, defini uma variável chamada “page” que inicialmente aponta para o Componente Loader que criamos (linha 48) e é renderizada quando o arquivo é retornado (linha 67). Isso garante que a primeira coisa a ser exibida na tela quando abrimos a aplicação seja o nosso Loader. Na linha 51, verificamos se o componente QlikConnection terminou de se conectar ao QVF. Assim que o mashup se conecta ao QVF, a variável page para de apontar para o Componente Loader e passa a apontar para o Componente page que será desenhado na tela.
Agora, sempre que abrirmos nosso Mashup, esse loader aparecerá até que a conexão com o QVF seja feita.
Considerações Finais
Seguindo a mesma lógica, você também pode criar uma variedade de loaders para objetos individuais. Em vez de chamar o Componente Loader dentro do arquivo App.js, você deve fazê-lo dentro do Componente do Objeto desejado, onde o loader será exibido enquanto ainda não houver dados para exibir.
Lembre-se de que você também pode personalizar o CSS desse loader, ou, se preferir, também pode usar loaders de outras bibliotecas ou até em outros formatos, como GIFs ou SVGs.
Se você precisa desenvolver recursos avançados para o Qlik Sense por meio de mashups ou extensões, envie-nos um e-mail: info@clusterdesign.com.br
