feat: add loading

domains/dashboard/Dashboard.tsx

@@ -19,15 +19,15 @@ const Dashboard = ({ clinicalData }: ComponentProps): ReactNode => {
     return <h1>Erro ao carregar dados</h1>;
   }
 
-  if (loading) return <p className='text-zinc-950 text-center'>Carregando...</p>;
+  if (loading) return <DashboardSkeleton />;
 
   const dataset = typeof data !== 'undefined' ? data : clinicalData;
 
   return (
     <div className='bg-primary overflow-hidden w-screen min-h-screen text-foreground font-sans'>
       <Header />
       <Sidebar />
-      <main className='px-2 md:px-12 m-auto md:ml-16 mt-16 bg-background rounded-tl-3xl'>
+      <main className='px-2 md:px-12 m-auto md:ml-16 min-h-[calc(100vh-4rem)] mt-16 bg-background rounded-tl-3xl'>
         <Banner />
         <Cards
           countPatients={dataset?.countPatients}

domains/dashboard/components/DashboardSkeleton/DashboardSkeleton.tsx

@@ -36,8 +36,6 @@ const DashboardSkeleton = (): ReactNode => (
       <section className='w-full h-full grid xl:grid-cols-2 grid-flow-row py-8 gap-x-4 gap-y-14 max-w-full md:px-5 place-items-center'>
         <GridItem />
         <GridItem />
-        <GridItem />
-        <GridItem />
       </section>
     </main>
   </div>

domains/dashboard/features/Cards/Cards.tsx

@@ -10,29 +10,29 @@ const Cards: FC<CardProps> = ({ countPatients = 0, countDeadPatients = 0 }) => {
   const confirmedCases = Intl.NumberFormat('pt-BR').format(countPatients);
   const deaths = Intl.NumberFormat('pt-BR').format(countDeadPatients);
 
-  const fatality = countDeadPatients / countPatients;
-  const fatalityRate = (fatality * 100).toFixed(2);
+  const fatality: number = countDeadPatients / countPatients;
+  const fatalityRate = isNaN(fatality * 100) ? 0 : (fatality * 100).toFixed(2);
 
   return (
     <section className='w-full grid md:grid-cols-3 gap-6 lg:gap-25 xl:gap-32 px-5 pt-10'>
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
-        <div className='absolute rounded-sm bg-indigo-600 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
+        <div className='absolute rounded-sm bg-indigo-600 border-green-400 left-[-3px] top-6 h-9 w-[.35rem]'></div>
         <h1 className='text-xl uppercase font-normal font-sans text-foreground'>
           Casos Confirmados
         </h1>
         <h2 className='text-xl text-foreground font-semibold'>{confirmedCases}</h2>
       </div>
 
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
-        <div className='absolute rounded-sm bg-rose-500 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
+        <div className='absolute rounded-sm bg-rose-500 border-green-400 left-[-3px] top-6 h-9 w-[.35rem]'></div>
         <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Mortes</h1>
         <h2 className='text-xl text-slate-800 font-semibold'>{deaths}</h2>
       </div>
 
       <div className='h-32 bg-white rounded-2xl flex flex-col flex-1 justify-evenly p-3 relative border-2 border-slate-200'>
-        <div className='absolute rounded-sm bg-emerald-400 border-green-400 left-[-3px] top-5 h-9 w-[.35rem]'></div>
+        <div className='absolute rounded-sm bg-emerald-400 border-green-400 left-[-3px] top-6 h-9 w-[.35rem]'></div>
         <h1 className='text-xl font-normal uppercase font-sans text-foreground'>Letalidade</h1>
-        <h2 className='text-xl text-foreground font-semibold'>{fatalityRate}%</h2>
+        <h2 className='text-xl text-foreground font-semibold'>{fatalityRate} %</h2>
       </div>
     </section>
   );

domains/dashboard/features/PatientsByAge/PatientsByAge.tsx

@@ -20,7 +20,7 @@ const orderByAge = ({ countPatientsByAge }: IPatientsByAge): PatientByAge[] => {
 
 const PatientsByAge: FC<IPatientsByAge> = ({ countPatientsByAge }) => {
   // eslint-disable-next-line no-extra-boolean-cast
-  if (!Boolean(countPatientsByAge)) return null;
+  if (countPatientsByAge.length <= 0) return null;
 
   const sortedDataChart = orderByAge({ countPatientsByAge });
 

domains/dashboard/features/Sidebar/Sidebar.tsx

@@ -20,7 +20,7 @@ const Sidebar = (): ReactNode => {
   };
 
   return (
-    <aside className='bg-primary bg-opacity-80 fixed w-full h-16 bottom-0 md:h-screen md:w-16 md:left-0 z-0 flex items-center justify-center md:flex-col backdrop-blur-sm'>
+    <aside className='bg-primary bg-opacity-80 fixed z-10 w-full h-16 bottom-0 md:h-screen md:w-16 md:left-0 z-0 flex items-center justify-center md:flex-col backdrop-blur-sm'>
       <Link href='/' className={isLinkActive('/')}>
         <BiHomeAlt size={23} color={isColorActive('/')} />
       </Link>

domains/dashboard/features/Symptoms/Symptoms.tsx

@@ -13,6 +13,8 @@ const Symptoms: FC<ComponentProps> = ({ countPatientsSymptoms }) => {
   const [, ...labels] = Object.keys(countPatientsSymptoms);
   const [, ...values] = Object.values(countPatientsSymptoms);
 
+  if (values.every((count) => count <= 0)) return null;
+
   const percentages = calculatePercentages(values);
 
   const dataset = {

package.json

@@ -53,6 +53,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
+    "react-topbar-progress-indicator": "^4.1.1",
     "recharts": "^2.7.0",
     "tailwindcss": "3.3.2",
     "zustand": "^4.3.8"

pages/_app.tsx

@@ -21,6 +21,7 @@ import {
 } from 'chart.js';
 import { ApolloProvider } from '@apollo/client';
 import { client } from '@/services/graphql/apollo';
+import { LoadingIndicator } from '@/shared/components/LoadingIndicator';
 
 ChartJS.defaults.scale.grid.display = false;
 
@@ -64,6 +65,7 @@ const MyApp = ({ Component, pageProps }: AppProps): ReactNode => {
           content='covid, covid-19, covid19, coronavírus, pandemia, brasil, dados, informações, gráficos, gráficos interativos, gráficos animados, gráficos animados interativos, gráficos animados interativos covid-19'
         />
       </Head>
+      <LoadingIndicator />
       <ApolloProvider client={client}>
         <Component {...pageProps} />
       </ApolloProvider>

shared/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode, useState } from 'react';
+import LoaderRouterIndicator from 'react-topbar-progress-indicator';
+import { Router } from 'next/router';
+
+const LoadingIndicator = (): ReactNode => {
+  const [progress, setProgress] = useState(false);
+
+  LoaderRouterIndicator.config({
+    barColors: {
+      0: '#ffbe0b',
+      1.0: '#fb5607',
+    },
+    barThickness: 4,
+    shadowBlur: 0,
+  });
+
+  Router.events.on('routeChangeStart', () => {
+    setProgress(true);
+  });
+
+  Router.events.on('routeChangeComplete', () => {
+    setProgress(false);
+  });
+
+  return <div>{progress && <LoaderRouterIndicator />}</div>;
+};
+
+export { LoadingIndicator };

shared/components/LoadingIndicator/index.ts

@@ -0,0 +1 @@
+export { LoadingIndicator } from './LoadingIndicator';

yarn.lock

@@ -5089,6 +5089,13 @@
     "prismjs" "^1.27.0"
     "refractor" "^3.6.0"
 
+"react-topbar-progress-indicator@^4.1.1":
+  "integrity" "sha512-Oy3ENNKfymt16zoz5SYy/WOepMurB0oeZEyvuHm8JZ3jrTCe1oAUD7fG6HhYt5sg8Wcg5gdkzSWItaFF6c6VhA=="
+  "resolved" "https://registry.npmjs.org/react-topbar-progress-indicator/-/react-topbar-progress-indicator-4.1.1.tgz"
+  "version" "4.1.1"
+  dependencies:
+    "topbar" "^0.1.3"
+
 "react-transition-group@2.9.0":
   "integrity" "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg=="
   "resolved" "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz"
@@ -5842,6 +5849,11 @@
   "resolved" "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
   "version" "1.0.6"
 
+"topbar@^0.1.3":
+  "integrity" "sha512-P3n4WnN4GFd2mQXDo30rQmsAGe4V1bVkggtTreSbNyL50Fyc+eVkW5oatSLeGQmJoan2TLIgoXUZypN+6nw4MQ=="
+  "resolved" "https://registry.npmjs.org/topbar/-/topbar-0.1.4.tgz"
+  "version" "0.1.4"
+
 "tough-cookie@~2.5.0":
   "integrity" "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g=="
   "resolved" "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"