table-search-issue debounce in search of f-table-schema

ollionorg · Jun 11, 2024 · b9862d6 · b9862d6
1 parent 265dea5
commit b9862d6
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 4 deletions.
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.9.13] - 2024-06-11
+
+### Improvements
+
+- `getComputedStyle` api usage removed, since it might cause render delay.
+
 ## [2.9.12] - 2024-05-27
 
 ### Improvements

diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.12",
+  "version": "2.9.13",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.scss b/packages/flow-core/src/components/f-pictogram/f-pictogram.scss
@@ -273,6 +273,7 @@ $hexagon-clip-path: polygon(
 		}
 
 		&[variant="hexagon"] {
+			clip-path: $hexagon-clip-path;
 			&:after {
 				clip-path: $hexagon-clip-path;
 			}

diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.4.7] - 2024-06-11
+
+### Improvements
+
+- `f-table-schema` 300ms debounce added in search to avoid browser freeze.
+
 ## [2.4.6] - 2024-05-27
 
 ### Bug Fixes

diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-table",
-  "version": "2.4.6",
+  "version": "2.4.7",
   "description": "Table component for flow library",
   "module": "dist/flow-table.es.js",
   "main": "dist/flow-table.cjs.js",

diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts
@@ -194,11 +194,16 @@ export class FTableSchema extends FRoot {
 	@query("#f-table-element")
 	tableElement?: FTable;
 
+	@query("#f-table-search")
+	tableSearchElement!: FSearch;
+
 	@query(".f-table-schema-wrapper")
 	fTableWrapper!: HTMLDivElement;
 
 	nextEmitted = false;
 
+	searchTimeout?: number;
+
 	get max() {
 		return this.rowsPerPage ?? 50;
 	}
@@ -411,8 +416,14 @@ export class FTableSchema extends FRoot {
 	}
 
 	search(event: CustomEvent) {
-		this.searchScope = event.detail.scope;
-		this.searchTerm = event.detail.value;
+		this.tableSearchElement.loading = true;
+		if (this.searchTimeout) {
+			clearTimeout(this.searchTimeout);
+		}
+		this.searchTimeout = setTimeout(() => {
+			this.searchScope = event.detail.scope;
+			this.searchTerm = event.detail.value;
+		}, 300);
 	}
 	get noDataTemplate() {
 		if (this.data.rows.length === 0 && this.data.header) {
@@ -445,6 +456,7 @@ export class FTableSchema extends FRoot {
 							.width=${this.offsetWidth ? `${this.offsetWidth}px` : `100%`}
 					  >
 							<f-search
+								id="f-table-search"
 								.scope=${["all", ...Object.keys(this.data.header)]}
 								.selected-scope=${this.searchScope}
 								.value=${this.searchTerm}
@@ -523,6 +535,7 @@ export class FTableSchema extends FRoot {
 			if (this.tableElement) {
 				await this.tableElement.updateHeaderSelectionCheckboxState();
 			}
+			this.tableSearchElement.loading = false;
 		});
 	}