fix: Update map with tables fixes

src/pages/Carrier/CarrierListPage/index.tsx

@@ -1,10 +1,12 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { ruRU } from "@mui/x-data-grid/locales";
 import { carrierStore, cityStore, languageStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
+import { Box, CircularProgress } from "@mui/material";
 
 export const CarrierListPage = observer(() => {
   const { carriers, getCarriers, deleteCarrier } = carrierStore;
@@ -14,15 +16,19 @@ export const CarrierListPage = observer(() => {
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
   const { language } = languageStore;
 
   useEffect(() => {
-    (async () => {
+    const fetchData = async () => {
+      setIsLoading(true);
       await getCities("ru");
       await getCities("en");
       await getCities("zh");
       await getCarriers(language);
-    })();
+      setIsLoading(false);
+    };
+    fetchData();
   }, [language]);
 
   const columns: GridColDef[] = [
@@ -63,11 +69,13 @@ export const CarrierListPage = observer(() => {
       headerName: "Город",
       flex: 1,
       renderCell: (params: GridRenderCellParams) => {
+        const city = cities[language]?.data.find(
+          (city) => city.id == params.value
+        );
         return (
           <div className="w-full h-full flex items-center">
-            {params.value ? (
-              cities[language].data.find((city) => city.id == params.value)
-                ?.name
+            {city && city.name ? (
+              city.name
             ) : (
               <Minus size={20} className="text-red-500" />
             )}
@@ -136,12 +144,24 @@ export const CarrierListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
-          checkboxSelection
-          onRowSelectionModelChange={(newSelection) => {
-            setIds(Array.from(newSelection.ids) as number[]);
-          }}
           hideFooter
+          checkboxSelection
+          loading={isLoading}
+          localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
+          onRowSelectionModelChange={(newSelection) => {
+            setIds(Array.from(newSelection.ids as unknown as number[]));
+          }}
+          slots={{
+            noRowsOverlay: () => (
+              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : (
+                  "Нет перевозчиков"
+                )}
+              </Box>
+            ),
+          }}
         />
       </div>