Você sabe como funciona a lógica de Loading nas aplicações?

William Quayson — Sun, 15 Nov 2020 00:38:44 +0000

Em JavaScript, as funções assíncronas são utilizadas para a realização de requisições HTTP (GET, POST, PUT, DELETE...) para se consumir dados, e, geralmente, essas funções demoram um certo tempo para ser executadas, por isso são assíncronas, para que a aplicação não pare por completo quando se precisar fazer uma requisição ao servidor.

Com isso em mente, por uma questão de usabilidade, é importante dar um feedback visual ao usuário quando uma requisição for iniciada e finalizada - o Loading.

Nós podemos controlar quando uma animação de loading vai ser mostrada ou não. Utilizando como exemplo o React(e, automaticamente, o React Native) podemos utilizar um estado que eu chamo de isLoading que possui um valor inicial false. Em conjunto com esse estado, utilizo alguma animação para ser mostrada em tela, servindo como feedback visual para o usuário. Por exemplo, no React eu posso usar a coleção React Spinners (https://www.davidhu.io/react-spinners/) e o React Native possui um componente nativo chamado Activity Indicator (https://reactnative.dev/docs/activityindicator).

Sempre que eu fizer uma função assíncrona em meu componente, dentro dela mudo o valor desse estado para true, e controlo o tempo da requisição via try/catch. Alterarei o estado de volta para false no try(após o await, que é quando a requisição é completada) e no início do catch, para mostrar algum possível erro.

Agora, para se mostrar a animação em tela enquanto todo esse processo é realizado, eu posso abrir chaves dentro do meu JSX e utilizar o operador lógico && ou um operador ternário.

Isso é tudo pessoal. Disseminem o conhecimento! Até a próxima!

DEV Community: William Quayson

Você sabe como funciona a lógica de Loading nas aplicações?