diff --git a/app/page.tsx b/app/page.tsx
index ca6c18f..2881102 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -31,6 +31,7 @@ interface TableParams {
 export default function Home() {
   const [rules, setRules] = useState<RuleInfo[]>([]);
   const [loading, setLoading] = useState(true);
+  const [mapLoading, setMapLoading] = useState(true);
   const [listOrMap, setListOrMap] = useState("list");
   const [categories, setCategories] = useState<ColumnFilterItem[]>([]);
 
@@ -56,6 +57,7 @@ export default function Home() {
 
   const fetchData = async () => {
     setLoading(true);
+    setMapLoading(true);
     try {
       const response = await getAllRuleData({
         page: tableParams.pagination?.current || 1,
@@ -75,14 +77,16 @@ export default function Home() {
           total: response.total,
         },
       });
+      setLoading(false);
 
       const { rules: graphRules, categories: graphCategories } = await fetchGraphRuleData();
       setKlammRules(graphRules);
       setCategoriesMap(graphCategories);
+      setMapLoading(false);
     } catch (error) {
       logError(`Error loading rules: ${error}`);
-    } finally {
       setLoading(false);
+      setMapLoading(false);
     }
   };
 
@@ -247,6 +251,49 @@ export default function Home() {
     });
   };
 
+  const pageContent = () => {
+    if (loading) {
+      return (
+        <Spin tip="Loading rules..." className="spinner">
+          <div className="content" />
+        </Spin>
+      );
+    }
+
+    if (listOrMap === "list") {
+      return (
+        <Table
+          columns={columns}
+          dataSource={rules}
+          tableLayout="fixed"
+          pagination={tableParams.pagination}
+          loading={loading}
+          onChange={handleTableChange}
+          rowKey="_id"
+        />
+      );
+    }
+
+    if (mapLoading) {
+      return (
+        <Spin tip="Loading map view..." className="spinner">
+          <div className="content" />
+        </Spin>
+      );
+    }
+
+    return (
+      <RuleRelationsGraph
+        rules={klammRules}
+        categories={categoriesMap}
+        location={location}
+        filter={categoryValue}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+      />
+    );
+  };
+
   return (
     <>
       <Flex justify="space-between" align="center" className={styles.headerWrapper}>
@@ -293,30 +340,7 @@ export default function Home() {
           value={listOrMap}
         />
       </div>
-      {loading ? (
-        <Spin tip="Loading rules..." className="spinner">
-          <div className="content" />
-        </Spin>
-      ) : listOrMap === "list" ? (
-        <Table
-          columns={columns}
-          dataSource={rules}
-          tableLayout="fixed"
-          pagination={tableParams.pagination}
-          loading={loading}
-          onChange={handleTableChange}
-          rowKey="_id"
-        />
-      ) : (
-        <RuleRelationsGraph
-          rules={klammRules}
-          categories={categoriesMap}
-          location={location}
-          filter={categoryValue}
-          searchTerm={searchTerm}
-          setSearchTerm={setSearchTerm}
-        />
-      )}
+      {pageContent()}
     </>
   );
 }