diff --git a/handlers/dev/md.polakelainan.handlers.go b/handlers/dev/md.polakelainan.handlers.go
index a1dcd2f..ecd6661 100644
--- a/handlers/dev/md.polakelainan.handlers.go
+++ b/handlers/dev/md.polakelainan.handlers.go
@@ -201,16 +201,18 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainan(c echo.Context) error
 	)
 
 	// filter kelainan component
-	kelainanFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV2(searchID,
+	kelainanFilterComponent := customtextfieldsearch.MainCustomTextFieldSearchV3(searchID,
 		"search",
 		"Cari Grup Kelainan",
 		"text",
 		"/dev/md/searchkelainan",
 		"input changed delay:500ms, search",
-		"#"+paginationID, "", "", "outerHTML", "#tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID")
+		"#"+paginationID, "#loadingcontent", "", "outerHTML", "#tableDetailID, #tableID, #paginationID, #searchID, #dialogDeleteBodyID, #dialogDeleteID",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent())
 
 	// pagination kelainan component
-	kelainanPaginationComponent := pagination.PaginationV2(
+	kelainanPaginationComponent := pagination.PaginationV3(
 		totalpage,
 		1,
 		"/dev/md/kelainanpagination",
@@ -218,6 +220,8 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainan(c echo.Context) error
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableDetailID",
 		"#"+paginationID,
 		"outerHTML", "", "",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent(),
 	)
 
 	// modal delete form
@@ -273,16 +277,18 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainan(c echo.Context) error
 	)
 
 	// filter kelainan detail component
-	kelainanDetailFilterCmp := customtextfieldsearch.MainCustomTextFieldSearchV2(searchDetailID,
+	kelainanDetailFilterCmp := customtextfieldsearch.MainCustomTextFieldSearchV3(searchDetailID,
 		"searchdetail",
 		"Cari Kelainan/Klasifikasi",
 		"text",
 		"/dev/md/searchkelainandetail",
 		"input changed delay:500ms, searchdetail",
-		"#"+paginationDetailID, "", "", "none", "#tableDetailID, #paginationDetailID, #searchDetailID, #selectedID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID")
+		"#"+paginationDetailID, "#loadingcontentdetail", "", "none", "#tableDetailID, #paginationDetailID, #searchDetailID, #selectedID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail())
 
 	// pagination kelainan detail component
-	kelainanDetailPaginationCmp := pagination.PaginationV2(
+	kelainanDetailPaginationCmp := pagination.PaginationV3(
 		totalPageDetail,
 		1,
 		"/dev/md/kelainandetailpagination",
@@ -290,6 +296,8 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainan(c echo.Context) error
 		"#tableDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #"+searchDetailID+", #paginationDetailID",
 		"#"+paginationDetailID,
 		"outerHTML", "", "",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
 	)
 
 	// component modal add kelainan detail
@@ -461,12 +469,15 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainanSearch(c echo.Context)
 		"#"+tableDetailID,
 	)
 
-	kelainanPaginationComponent := pagination.PaginationV2(totalpage,
+	kelainanPaginationComponent := pagination.PaginationV3(totalpage,
 		1,
 		"/dev/md/kelainanpagination",
 		paginationID,
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableDetailID",
-		"#"+paginationID, "outerHTML", "", "")
+		"#"+paginationID, "outerHTML", "", "",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent(),
+	)
 
 	retval := []templ.Component{contentKelainanComponent, kelainanPaginationComponent}
 
@@ -517,12 +528,15 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainanPagination(c echo.Cont
 		"#"+tableDetailID,
 	)
 
-	kelainanPaginationComponent := pagination.PaginationV2(totalpage,
+	kelainanPaginationComponent := pagination.PaginationV3(totalpage,
 		page,
 		"/dev/md/kelainanpagination",
 		paginationID,
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableDetailID",
-		"#"+paginationID, "outerHTML", "", "")
+		"#"+paginationID, "outerHTML", "", "",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent(),
+	)
 
 	retval := []templ.Component{contentKelainanComponent, kelainanPaginationComponent}
 
@@ -658,12 +672,15 @@ func (lh *MasterKelainanHandler) AddKelainan(c echo.Context) error {
 	)
 
 	// New pagination
-	kelainanPaginationComponent := pagination.PaginationV2(totalpage,
+	kelainanPaginationComponent := pagination.PaginationV3(totalpage,
 		currPage,
 		"/dev/md/kelainanpagination",
 		paginationID,
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableDetailID",
-		"#"+paginationID, "outerHTML", "", "true")
+		"#"+paginationID, "outerHTML", "", "true",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent(),
+	)
 
 	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Success add kelainan "+name, "success")
 
@@ -813,7 +830,7 @@ func (lh *MasterKelainanHandler) HandleDeleteKelainan(c echo.Context) error {
 	)
 
 	//pagination component
-	kelainanPaginationComponent := pagination.PaginationV2(
+	kelainanPaginationComponent := pagination.PaginationV3(
 		totalPage,
 		currPage,
 		"/dev/md/kelainanpagination",
@@ -821,6 +838,8 @@ func (lh *MasterKelainanHandler) HandleDeleteKelainan(c echo.Context) error {
 		"#tableID, #searchID, #"+searchID+", #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableDetailID",
 		"#"+paginationID,
 		"outerHTML", "", "true",
+		masterkelainan.BeforeRequestContent(),
+		masterkelainan.AfterRequestContent(),
 	)
 
 	newForm := masterkelainan.DeleteConfirmationBody(
@@ -999,7 +1018,7 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainanDetail(c echo.Context)
 	)
 
 	// pagination kelainan detail component
-	kelainanDetailPaginationCmp := pagination.PaginationV2(
+	kelainanDetailPaginationCmp := pagination.PaginationV3(
 		totalPageDetail,
 		1,
 		"/dev/md/kelainandetailpagination",
@@ -1007,6 +1026,8 @@ func (lh *MasterKelainanHandler) HandlerShowMasterKelainanDetail(c echo.Context)
 		"#selectedID, #tableDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #"+searchDetailID+", #paginationDetailID",
 		"#"+paginationDetailID,
 		"outerHTML", "", "true",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
 	)
 
 	return utils.ViewMulti(c, []templ.Component{selectid, contentKelainanDetailCmp, kelainanDetailPaginationCmp})
@@ -1044,13 +1065,15 @@ func (lh *MasterKelainanHandler) HandlerShowMdKelainanDetailSearch(c echo.Contex
 		"#dialogDetailDeleteBodyID, #dialogDetailDeleteID, #tableDetailID",
 	)
 
-	kelainanDetailPaginationCmp := pagination.PaginationV2(
+	kelainanDetailPaginationCmp := pagination.PaginationV3(
 		totalpagedetail,
 		1,
 		"/dev/md/kelainandetailpagination",
 		paginationDetailID,
 		"#selectedID, #tableDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #"+searchDetailID+", #paginationDetailID",
 		"#"+paginationDetailID, "outerHTML", "", "true",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
 	)
 
 	retVal := []templ.Component{contentKelainanDetailCmp, kelainanDetailPaginationCmp}
@@ -1103,12 +1126,14 @@ func (lh *MasterKelainanHandler) HandlerShowMdKelainanDetailPagination(c echo.Co
 		"#dialogDetailDeleteBodyID, #dialogDetailDeleteID, #tableDetailID",
 	)
 
-	kelainanPaginationCmp := pagination.PaginationV2(totalpgaedetail,
+	kelainanPaginationCmp := pagination.PaginationV3(totalpgaedetail,
 		page,
 		"/dev/md/kelainandetailpagination",
 		paginationDetailID,
 		"#selectedID, #tableDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #"+searchDetailID+", #paginationDetailID",
 		"#"+paginationDetailID, "outerHTML", "", "",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
 	)
 
 	retval := []templ.Component{contentKelainanDetailCmp, kelainanPaginationCmp}
@@ -1295,12 +1320,15 @@ func (lh *MasterKelainanHandler) HandlerAddKelainanDetail(c echo.Context) error
 	)
 
 	// new pagination
-	kelainanDetailPaginationCmp := pagination.PaginationV2(totalpage,
+	kelainanDetailPaginationCmp := pagination.PaginationV3(totalpage,
 		currPage,
 		"/dev/md/kelainandetailpagination",
 		paginationDetailID,
 		"#tableDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #"+searchDetailID+", #paginationDetailID",
-		"#"+paginationDetailID, "outerHTML", "", "true")
+		"#"+paginationDetailID, "outerHTML", "", "true",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
+	)
 
 	toastSuccess := customtoastv2.CustomToastV2Show("Success", "Success add kelainan "+nameKelainanDetail, "success")
 
@@ -1467,7 +1495,7 @@ func (lh *MasterKelainanHandler) HandlerDeleteKelainanDetail(c echo.Context) err
 		"#dialogDetailDeleteBodyID, #dialogDetailDeleteID, #tableDetailID",
 	)
 
-	kelainanDetailPaginationCmp := pagination.PaginationV2(
+	kelainanDetailPaginationCmp := pagination.PaginationV3(
 		totalpage,
 		currPage,
 		"/dev/md/kelainandetailpagination",
@@ -1475,6 +1503,8 @@ func (lh *MasterKelainanHandler) HandlerDeleteKelainanDetail(c echo.Context) err
 		"#tableDetailID, #searchDetailID, #"+searchDetailID+", #paginationDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID",
 		"#"+paginationDetailID,
 		"outerHTML", "", "true",
+		masterkelainan.BeforeRequestContentDetail(),
+		masterkelainan.AfterRequestContentDetail(),
 	)
 
 	newForm := masterkelainan.DeleteConfirmationBodyDetail(
diff --git a/views/dev/mdpolakelainan/masterkelainan.templ b/views/dev/mdpolakelainan/masterkelainan.templ
index 46b05ff..5d61add 100644
--- a/views/dev/mdpolakelainan/masterkelainan.templ
+++ b/views/dev/mdpolakelainan/masterkelainan.templ
@@ -125,10 +125,19 @@ templ ContentMasterKelainan(
 						>Add New</button>
 					</div>
 				</div>
-				@tablecontent
-				@paginationComponent
-				@modalAddform
-				@modalDeleteForm
+				<div id="loading-parent" class=" rounded">
+					@tablecontent
+					@paginationComponent
+					@modalAddform
+					@modalDeleteForm
+					<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>
 			<div class="col-lg-6" style="border-left: 1px dashed #ddd">
 				<div class="row">
@@ -154,10 +163,19 @@ templ ContentMasterKelainan(
 						>Add New</button>
 					</div>
 				</div>
-				@tabledetailcontent
-				@paginationDetailComponent
-				@modalDetailAddForm
-				@modalDetailForm
+				<div id="loading-parent-detail" class=" rounded">
+					@tabledetailcontent
+					@paginationDetailComponent
+					@modalDetailAddForm
+					@modalDetailForm
+					<div id="loading-child-detail" class=" rounded bg-transparent">
+						// <div class="spinner spinner-lg spinner-primary"></div>
+						<div id="loading-spinner-detail" 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="loadingcontentdetail"></div>
 			</div>
 		</div>
 	</div>
@@ -212,6 +230,111 @@ templ CssKelainan() {
 }
 
 templ JsMdKelainan() {
+	<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();
+            }
+        });
+
+        // detail
+        document.addEventListener('htmx:beforeRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontentdetail');
+			console.log(event.detail.xhr)
+			console.log(event.detail.elt)
+            if (indicator) {
+                onLoadingStart();
+            }
+        });
+
+        document.addEventListener('htmx:afterRequest', function(event) {
+            var indicator = document.querySelector('#loadingcontentdetail');
+            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");
+}
+
+// kelainan detail
+
+script BeforeRequestContentDetail() {
+			const loadingParentDetail = document.getElementById("loading-parent-detail");
+			const loadingChildDetail = document.getElementById("loading-child-detail");
+			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");
+
+			loadingParentDetail.classList.add("overlay");
+			loadingParentDetail.classList.add("overlay-block");
+			loadingChildDetail.classList.add("overlay-layer");
+			loadingSpinnerDetail.classList.remove("d-none");
+}
+
+script AfterRequestContentDetail() {
+			const loadingParentDetail = document.getElementById("loading-parent-detail");
+			const loadingChildDetail = document.getElementById("loading-child-detail");
+			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");
+
+			loadingParentDetail.classList.remove("overlay");
+			loadingParentDetail.classList.remove("overlay-block");
+			loadingChildDetail.classList.remove("overlay-layer");
+			loadingSpinnerDetail.classList.add("d-none");
 }
 
 templ ShowKelainan(
diff --git a/views/dev/mdpolakelainan/masterkelainan_templ.go b/views/dev/mdpolakelainan/masterkelainan_templ.go
index cbe47b6..ae06008 100644
--- a/views/dev/mdpolakelainan/masterkelainan_templ.go
+++ b/views/dev/mdpolakelainan/masterkelainan_templ.go
@@ -207,7 +207,7 @@ func ContentMasterKelainan(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div id=\"loading-parent\" class=\" rounded\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -227,7 +227,7 @@ func ContentMasterKelainan(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-lg-6\" style=\"border-left: 1px dashed #ddd\"><div class=\"row\"><div class=\"col-lg-10\">")
+		_, 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><div class=\"col-lg-6\" style=\"border-left: 1px dashed #ddd\"><div class=\"row\"><div class=\"col-lg-10\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -242,7 +242,7 @@ func ContentMasterKelainan(
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogDetailAddID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpolakelainan\masterkelainan.templ`, Line: 144, Col: 45}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpolakelainan\masterkelainan.templ`, Line: 153, Col: 45}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
@@ -255,13 +255,13 @@ func ContentMasterKelainan(
 		var templ_7745c5c3_Var5 string
 		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("#" + dialogDetailAddID)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpolakelainan\masterkelainan.templ`, Line: 153, Col: 44}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\dev\mdpolakelainan\masterkelainan.templ`, Line: 162, Col: 44}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Add New</button></div></div><div id=\"loading-parent-detail\" class=\" rounded\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -281,7 +281,7 @@ func ContentMasterKelainan(
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child-detail\" class=\" rounded bg-transparent\"><div id=\"loading-spinner-detail\" 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=\"loadingcontentdetail\"></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -329,6 +329,10 @@ func JsMdKelainan() templ.Component {
 			templ_7745c5c3_Var7 = 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\r\n        // detail\r\n        document.addEventListener('htmx:beforeRequest', function(event) {\r\n            var indicator = document.querySelector('#loadingcontentdetail');\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('#loadingcontentdetail');\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)
 		}
@@ -336,6 +340,75 @@ func JsMdKelainan() 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_b16e`,
+		Function: `function __templ_AfterRequestContent_b16e(){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_b16e`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContent_b16e`),
+	}
+}
+
+// kelainan detail
+func BeforeRequestContentDetail() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_BeforeRequestContentDetail_74e6`,
+		Function: `function __templ_BeforeRequestContentDetail_74e6(){const loadingParentDetail = document.getElementById("loading-parent-detail");
+			const loadingChildDetail = document.getElementById("loading-child-detail");
+			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");
+
+			loadingParentDetail.classList.add("overlay");
+			loadingParentDetail.classList.add("overlay-block");
+			loadingChildDetail.classList.add("overlay-layer");
+			loadingSpinnerDetail.classList.remove("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_BeforeRequestContentDetail_74e6`),
+		CallInline: templ.SafeScriptInline(`__templ_BeforeRequestContentDetail_74e6`),
+	}
+}
+
+func AfterRequestContentDetail() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_AfterRequestContentDetail_0b0a`,
+		Function: `function __templ_AfterRequestContentDetail_0b0a(){const loadingParentDetail = document.getElementById("loading-parent-detail");
+			const loadingChildDetail = document.getElementById("loading-child-detail");
+			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");
+
+			loadingParentDetail.classList.remove("overlay");
+			loadingParentDetail.classList.remove("overlay-block");
+			loadingChildDetail.classList.remove("overlay-layer");
+			loadingSpinnerDetail.classList.add("d-none");
+}`,
+		Call:       templ.SafeScript(`__templ_AfterRequestContentDetail_0b0a`),
+		CallInline: templ.SafeScriptInline(`__templ_AfterRequestContentDetail_0b0a`),
+	}
+}
+
 func ShowKelainan(
 	title string,
 	cmp templ.Component,