Se crea el componente y los estilos para el loader en espera y la tabla que guarda a los pueblos

.town_list_content{

  background: white;

  width: 100%;

  height: 100%;

}

 No newline at end of file

import { useEffect, useState } from "react";

import { useTown } from "../../../../hooks/useTown";

import { State } from "../../../../infraestructure/entities/state";

import axios from "axios";

import "./assets/css/styles.css";

import { TownListTable } from "../sa_panel_town_list_element/sa_panel_town_table";

import { Town } from "../../../../infraestructure/entities/town";

import { LoadingScreen } from "../../../loading_screen/loading_screen";

interface props {

  statesList: State[];

}

export const SuperadminPanelTownList = ({statesList}: props) => {

  const {townsList, getTownsByState, setTownsList} = useTown();

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {

    refreshList();

  }, []);

  const refreshList = () => {

    setIsLoading(true);

    const getTownsList = async () => {

      try {

        if (statesList) {

          const townsListBackup: Town[] = [];

          statesList.forEach((state) => {

            getTownsByState(state.stateId, state.name);

            if (townsList) {

              townsListBackup.push(...townsList);

            }

          });

          setTownsList(townsListBackup);

        }

      } catch (error: any) {

        if (axios.isAxiosError(error)) {

          //console.log(error)

        }

      }

    }

    getTownsList();

  };

  return (

    <div className="town_list_content">

      {

        isLoading && 

        <LoadingScreen/>

      }

      {

        townsList &&  townsList.length>0 && 

          <TownListTable towns={townsList} setIsLoading={setIsLoading}/>

      }

    </div>

  );

}

 No newline at end of file