Spinner para representar carregamento e ele de inicio agora ele carrega sem precisar interagir

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -2,14 +2,31 @@ import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
+import Spinner from '../Spinner';
+
 const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
-  const [indiceAcesso, setIndiceAcesso] = useState(0)
+  const [indiceAcesso, setIndiceAcesso] = useState(null)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
   const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';
 
   let ListaDiasComAgendamentos = Object.keys(agendamentos)
 
+  const [showSpinner, setShowSpinner] = useState(true);
+
+  
+useEffect(() => {
+  if (!agendamentos) return;
+
+  const dias = Object.keys(agendamentos);
+  if (dias.length > 0) {
+    setIndiceAcesso(0);          // começa no primeiro dia disponível
+    setDia(dias[0]);             // seta o Dia inicial
+
+  setShowSpinner(false)
+  }
+}, [agendamentos]);
+
 
   //console.log(Dia, "hshdhshhsdhs")
 
@@ -76,6 +93,14 @@ const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,se
               </td>
             </tr>
           )})}
+          {showSpinner &&
+          <tr>
+            <td colspan='2'>
+            <Spinner/>
+            </td>
+          </tr>
+          }
+
         </tbody>
       </table>
     </div>

src/components/AgendarConsulta/TabelaAgendamentoMes.jsx

@@ -6,18 +6,23 @@ import "./style/styleTabelas/tabelames.css";
 import { useEffect, useState } from 'react';
 import { useMemo } from 'react';
 
+import Spinner from '../Spinner';
+
 const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModal, setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID }) => {  
 
   const dataHoje = dayjs();
   const AnoAtual = dataHoje.year();
   const mes = dataHoje.month() + 1;
 
+  const [showSpinner, setShowSpinner] = useState(true)
+
+   
 
   console.log(agendamentos)
 
   let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
   const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({})
-  const [indice, setIndice] = useState("10")
+  const [indice, setIndice] = useState(mes.toString())
 
   const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({
   "01": { "nomeDoMes": "janeiro" },
@@ -35,15 +40,25 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa
 })
 
 
+
+  useEffect(() => {
+    if (!agendamentos) return;
   
+    const meses = Object.keys(agendamentos);
+    if (meses.length > 0) {
+            // começa no primeiro dia disponível
+      setIndice(mes.toString());             // seta o Dia inicial
+    setShowSpinner(false)
+    }
+  }, [agendamentos]);
+
 
    const OrganizarAgendamentosSemanais = useMemo(() => {
       if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
   
       const DiasComAtendimentos = Object.keys(agendamentos)
       const semanas = {}
-
-  
+ 
       for (let i = 0; i < DiasComAtendimentos.length; i++) {
         const DiaComAtendimento = DiasComAtendimentos[i]
         const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
@@ -218,8 +233,16 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa
         ))
       }
     </tr>
-
               )})}
+      {showSpinner && 
+      
+      <tr>
+        <td colspan='5'>
+          <Spinner/>
+        </td>
+      </tr>
+      
+      }
             </tbody>
       </table>
     </div>

src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx

@@ -4,6 +4,11 @@ import "./style/styleTabelas/tabelasemana.css";
 import dayjs from 'dayjs';
 import { useEffect, useState, useMemo } from 'react';
 import weekOfYear from 'dayjs/plugin/weekOfYear'
+
+
+import Spinner from '../Spinner';
+
+
 dayjs.extend(weekOfYear)
 
 const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID}) => { 
@@ -12,6 +17,21 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
   const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
   // Controla qual semana está sendo exibida (o índice da chave no objeto)
   const [Indice, setIndice] = useState(0); 
+  const [showSpinner, setShowSpinner] = useState(true)
+
+
+    useEffect(() => {
+      if (!agendamentos) return;
+    
+      const semanas = Object.keys(agendamentos);
+      if (semanas.length > 0) {
+              
+        setIndice(0)
+        setShowSpinner(false)
+   
+      }
+    }, [agendamentos]);
+  
 
   console.log(agendamentos, "agendamentos diarios")
 
@@ -129,10 +149,10 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
     ? `Semana ${chaveDaSemanaAtual.replace('semana', '')} / ${AnoAtual}` 
     : 'Nenhuma semana encontrada';
 
-  // --- RENDERIZAÇÃO ---
+
   return (
     <div>
-      {/* Container de Navegação */}
+      
       <div id='tabela-seletor-container'>
         
         <button 
@@ -214,6 +234,16 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM
               </td>
             </tr>
 )})}
+
+{showSpinner &&
+<tr>
+  <td colspan='6'>
+    <Spinner/>
+
+  </td>
+</tr>
+
+}
         </tbody>
       </table>
     </div>

src/components/Spinner.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Spinner = () => {
+  return (
+    <div>
+           <div className="d-flex justify-content-center align-items-center" style={{ height: "100%" }}>
+      <div className="spinner-border text-primary" role="status">
+        <span className="visually-hidden">Carregando...</span>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default Spinner

src/pages/Agendamento.jsx

@@ -19,6 +19,8 @@ import "./style/Agendamento.css";
 import './style/FilaEspera.css';
 import { Search } from 'lucide-react';
 
+import Spinner from '../components/Spinner.jsx';
+
 
 
 
@@ -48,14 +50,15 @@ const Agendamento = ({setDictInfo}) => {
     const [MedicoFiltrado, setMedicoFiltrado] = useState({id:"vazio"})
 
 
-    const [cacheAgendamentos, setCacheAgendamentos] = useState([])
+  const [cacheAgendamentos, setCacheAgendamentos] = useState([])
 
-    const [showConfirmModal, setShowConfirmModal] = useState(false)
-    const [motivoCancelamento, setMotivoCancelamento] = useState("")   
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
+  const [motivoCancelamento, setMotivoCancelamento] = useState("")   
 
-    const [listaConsultasID, setListaConsultaID] = useState([])
-    const [coresConsultas,setCoresConsultas] = useState([])
+  const [listaConsultasID, setListaConsultaID] = useState([])
+  const [coresConsultas,setCoresConsultas] = useState([])
 
+  const [showSpinner,setShowSpinner] = useState(true)
     
   let authHeader = getAuthorizationHeader() 
  
@@ -316,6 +319,9 @@ const handleSearchMedicos = (term) => {
     setFiltredTodosMedicos(filtered);
 };
   
+useEffect(() => {
+  setShowSpinner(false)
+},[filaEsperaData])
 
   return (
     <div>
@@ -493,6 +499,15 @@ const handleSearchMedicos = (term) => {
                           </div></td>
                         </tr>
                       ))}
+                      {showSpinner &&
+                      <tr>
+                        <td colspan='6'>
+                          <Spinner/>
+                        </td>
+                      </tr>
+                      
+                      }
+                    
                     </tbody>
                   </table>
                 </div>