diff --git a/handlers/dev/md.natunit.handlers.go b/handlers/dev/md.natunit.handlers.go
index 7a535e2..fc2491b 100644
--- a/handlers/dev/md.natunit.handlers.go
+++ b/handlers/dev/md.natunit.handlers.go
@@ -105,16 +105,18 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
 	)
 
 	//filter user group component
-	natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+	natUnitFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
 		"search",
 		"Cari Kode/Nama",
 		"text",
 		"/dev/md/natunit/filter",
 		"input changed delay:500ms, search",
-		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID")
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableID, #paginationID, #searchID",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent())
 
 	//Pagination
-	natUnitPaginationComponent := pagination.PaginationV2(
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		1,
 		"/dev/md/natunit/changepage",
@@ -122,6 +124,8 @@ func (nh *MdNatUnitHandler) HandleShowMdNatUnitScreen(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
 	)
 
 	// content, css, js
@@ -169,7 +173,7 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
 	}
 	tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
 		tableID)
-	natUnitPaginationComponent := pagination.PaginationV2(
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		1,
 		"/dev/md/natunit/changepage",
@@ -177,6 +181,8 @@ func (nh *MdNatUnitHandler) HandleFilterMdNatUnit(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, natUnitPaginationComponent)
@@ -213,7 +219,7 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
 	}
 	tableComponent := dev_mdnatunitview.TableNatUnit(dataNatUnit,
 		tableID)
-	natUnitPaginationComponent := pagination.PaginationV2(
+	natUnitPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		page,
 		"/dev/md/natunit/changepage",
@@ -221,6 +227,8 @@ func (nh *MdNatUnitHandler) HandlerChangePageMdNatUnit(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		dev_mdnatunitview.BeforeRequestContent(),
+		dev_mdnatunitview.AfterRequestContent(),
 	)
 	retval = append(retval, tableComponent)
 	retval = append(retval, natUnitPaginationComponent)
diff --git a/views/dev/mdnatunit/mdnatunit.templ b/views/dev/mdnatunit/mdnatunit.templ
index 51c3544..65a768b 100644
--- a/views/dev/mdnatunit/mdnatunit.templ
+++ b/views/dev/mdnatunit/mdnatunit.templ
@@ -50,8 +50,17 @@ templ MdNatUnitScreen(
 			</div>
 		</div>
 		@filterComponent
-		@tablecontent
-		@paginationComponent
+		<div id="loading-parent" class=" rounded">
+			@tablecontent
+			@paginationComponent
+			<div id="loading-child" class=" rounded bg-transparent">
+				// <div class="spinner spinner-lg spinner-primary"></div>
+				<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
+					<span class="sr-only">Loading...</span>
+				</div>
+			</div>
+		</div>
+		<div id="loadingcontent"></div>
 	</div>
 }
 
@@ -89,6 +98,70 @@ templ CssMdNatUnit() {
 }
 
 templ JsMdNatUnit() {
+	<script>
+        function onLoadingStart() {
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.add("overlay");
+			// loadingParent.classList.add("overlay-block");
+			// loadingChild.classList.add("overlay-layer");
+			// loadingSpinner.classList.remove("d-none");
+
+            // Additional logic when loading starts
+        }
+
+        function onLoadingEnd() {
+            console.log('Loading ended');
+            // const loadingParent = document.getElementById("loading-parent");
+			// const loadingChild = document.getElementById("loading-child");
+			// const loadingSpinner = document.getElementById("loading-spinner");
+
+			// loadingParent.classList.remove("overlay");
+			// loadingParent.classList.remove("overlay-block");
+			// loadingChild.classList.remove("overlay-layer");
+			// loadingSpinner.classList.add("d-none");
+        }
+
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontent');
+            if (indicator) {
+                onLoadingEnd();
+            }
+        });
+    </script>
+}
+
+script BeforeRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}
+
+script AfterRequestContent() {
+			const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
 }
 
 templ ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
diff --git a/views/dev/mdnatunit/mdnatunit_templ.go b/views/dev/mdnatunit/mdnatunit_templ.go
index 800ab15..532d8e2 100644
--- a/views/dev/mdnatunit/mdnatunit_templ.go
+++ b/views/dev/mdnatunit/mdnatunit_templ.go
@@ -77,6 +77,10 @@ func MdNatUnitScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-parent\" class=\" rounded\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		templ_7745c5c3_Err = tablecontent.Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
@@ -85,7 +89,7 @@ func MdNatUnitScreen(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\" rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -133,6 +137,10 @@ func JsMdNatUnit() templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n        function onLoadingStart() {\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.add(\"overlay\");\r\n\t\t\t// loadingParent.classList.add(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.add(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.remove(\"d-none\");\r\n\r\n            // Additional logic when loading starts\r\n        }\r\n\r\n        function onLoadingEnd() {\r\n            console.log('Loading ended');\r\n            // const loadingParent = document.getElementById(\"loading-parent\");\r\n\t\t\t// const loadingChild = document.getElementById(\"loading-child\");\r\n\t\t\t// const loadingSpinner = document.getElementById(\"loading-spinner\");\r\n\r\n\t\t\t// loadingParent.classList.remove(\"overlay\");\r\n\t\t\t// loadingParent.classList.remove(\"overlay-block\");\r\n\t\t\t// loadingChild.classList.remove(\"overlay-layer\");\r\n\t\t\t// loadingSpinner.classList.add(\"d-none\");\r\n        }\r\n\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n\t\t\tconsole.log(event.detail.xhr)\r\n\t\t\tconsole.log(event.detail.elt)\r\n            if (indicator) {\r\n                onLoadingStart();\r\n            }\r\n        });\r\n\r\n        document.addEventListener('htmx:afterRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontent');\r\n            if (indicator) {\r\n                onLoadingEnd();\r\n            }\r\n        });\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@@ -140,6 +148,40 @@ func JsMdNatUnit() templ.Component {
 	})
 }
 
+func BeforeRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContent_911f`,
+		Function: `function __templ_BeforeRequestContent_911f(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.add("overlay");
+			loadingParent.classList.add("overlay-block");
+			loadingChild.classList.add("overlay-layer");
+			loadingSpinner.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContent_911f`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContent_911f`),
+	}
+}
+
+func AfterRequestContent() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContent_6cc0`,
+		Function: `function __templ_AfterRequestContent_6cc0(){const loadingParent = document.getElementById("loading-parent");
+			const loadingChild = document.getElementById("loading-child");
+			const loadingSpinner = document.getElementById("loading-spinner");
+
+			loadingParent.classList.remove("overlay");
+			loadingParent.classList.remove("overlay-block");
+			loadingChild.classList.remove("overlay-layer");
+			loadingSpinner.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContent_6cc0`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_6cc0`),
+	}
+}
+
 func ShowMdNatUnitScreen(title string, cmp templ.Component, css templ.Component, js templ.Component,
 	navbarmenu templ.Component,
 	navbaruser templ.Component,