fix: Update map with tables fixes

src/pages/Article/ArticleListPage/index.tsx

@@ -1,10 +1,12 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
+import { ruRU } from "@mui/x-data-grid/locales";
 import { articlesStore, languageStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Eye, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { DeleteModal, LanguageSwitcher } from "@widgets";
+import { Box, CircularProgress } from "@mui/material";
 
 export const ArticleListPage = observer(() => {
   const { articleList, getArticleList, deleteArticles } = articlesStore;
@@ -14,9 +16,15 @@ export const ArticleListPage = observer(() => {
   const [rowId, setRowId] = useState<string | null>(null);
   const { language } = languageStore;
   const [ids, setIds] = useState<number[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    getArticleList();
+    const fetchArticles = async () => {
+      setIsLoading(true);
+      await getArticleList();
+      setIsLoading(false);
+    };
+    fetchArticles();
   }, [language]);
 
   const columns: GridColDef[] = [
@@ -93,10 +101,21 @@ export const ArticleListPage = observer(() => {
             columns={columns}
             hideFooterPagination
             checkboxSelection
+            loading={isLoading}
+            localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
             onRowSelectionModelChange={(newSelection) => {
               setIds(Array.from(newSelection.ids) as number[]);
             }}
             hideFooter
+            slots={{
+              noRowsOverlay: () => (
+                <Box
+                  sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}
+                >
+                  {isLoading ? <CircularProgress size={20} /> : "Нет статей"}
+                </Box>
+              ),
+            }}
           />
         </div>
       </div>