fix: remove request frame as it causes problems (performance) #290

source/components/datatable/dataset.mjs

@@ -236,7 +236,7 @@ class DataSet extends CustomElement {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
-		requestAnimationFrame(() => {
+		setTimeout(() => {
 			if (!this[datasourceLinkedElementSymbol]) {
 				const selector = this.getOption("datasource.selector");
 
@@ -278,7 +278,7 @@ class DataSet extends CustomElement {
 			}
 
 			initEventHandler.call(this);
-		});
+		},10);
 	}
 
 	/**

source/components/datatable/datatable.mjs

@@ -414,7 +414,7 @@ class DataTable extends CustomElement {
 
 					this[datasourceLinkedElementSymbol] = element;
 
-					getWindow().requestAnimationFrame(() => {
+					queueMicrotask(() => {
 						handleDataSourceChanges.call(this);
 						if (element && "datasource" in element) {
 							element.datasource.attachObserver(

source/components/datatable/filter.mjs

@@ -547,11 +547,9 @@ function updateFilterSelections() {
 		this[filterSelectElementSymbol].setOption("options", options);
 
 		setTimeout(() => {
-			window.requestAnimationFrame(() => {
 			this[filterSelectElementSymbol].value =
 				this[settingsSymbol].getSelected();
-			});
-		}, 0);
+		}, 10);
 	});
 }
 

source/components/datatable/pagination.mjs

@@ -516,7 +516,7 @@ function handleDataSourceChanges() {
 		pagination.items = [];
 	}
 
-	getWindow().requestAnimationFrame(() => {
+	queueMicrotask(() => {
 		this.setOption("pagination", pagination);
 	});
 }

source/dom/customcontrol.mjs

@@ -324,7 +324,8 @@ class CustomControl extends CustomElement {
      * @param {string} state
      * @param {string} mode
      */
-	formStateRestoreCallback(state, mode) {}
+    formStateRestoreCallback(state, mode) {
+    }
 
     /**
      *
@@ -378,14 +379,15 @@ function initValueAttributeObserver() {
         }
 
         self[debounceValueSymbol] = new DeadMansSwitch(50, () => {
-			requestAnimationFrame(() => {
             const oldValue = self.getAttribute("value");
             const newValue = self.getOption("value");
 
             if (oldValue !== newValue) {
+                queueMicrotask(() => {
                     this.setOption("value", this.getAttribute("value"));
-				}
                 });
+
+            }
         });
     };
 }