Construct the terms only once for schema filters.

frontend/app/features/content/pages/schemas/schemas-page.component.html

@@ -21,7 +21,7 @@
         <ng-container *ngIf="schemasState.publishedSchemas | async; let schemas">
             <sqx-schema-category *ngFor="let category of schemasState.categories | async; trackBy: trackByCategory"
                 [schemaCategory]="category"
-                [schemasFilter]="schemasFilter.valueChanges | async"
+                [schemasFilter]="schemaFilterFunction | async"
                 [forContent]="true">
             </sqx-schema-category>
         </ng-container>

frontend/app/features/content/pages/schemas/schemas-page.component.ts

@@ -7,7 +7,8 @@
 
 import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { LocalStoreService, SchemaCategory, SchemasState, Settings } from '@app/shared';
+import { buildSchemaFilterFunction, LocalStoreService, SchemaCategory, SchemasState, Settings } from '@app/shared';
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'sqx-schemas-page',
@@ -17,6 +18,10 @@ import { LocalStoreService, SchemaCategory, SchemasState, Settings } from '@app/
 export class SchemasPageComponent {
     public schemasFilter = new FormControl();
 
+    public schemaFilterFunction =
+        this.schemasFilter.valueChanges.pipe(
+            map(buildSchemaFilterFunction));
+
     public isCollapsed: boolean;
 
     public get width() {

frontend/app/features/schemas/pages/schemas/schemas-page.component.html

@@ -23,7 +23,7 @@
         <div cdkDropListGroup>
             <sqx-schema-category *ngFor="let category of schemasState.categories | async; trackBy: trackByCategory"
                 [schemaCategory]="category"
-                [schemasFilter]="schemasFilter.valueChanges | async"
+                [schemasFilter]="schemaFilterFunction | async"
                 (remove)="removeCategory(category.displayName)">
             </sqx-schema-category>
         </div>

frontend/app/features/schemas/pages/schemas/schemas-page.component.ts

@@ -8,7 +8,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { CreateCategoryForm, DialogModel, MessageBus, ResourceOwner, SchemaCategory, SchemaDto, SchemasState } from '@app/shared';
+import { buildSchemaFilterFunction, CreateCategoryForm, DialogModel, MessageBus, ResourceOwner, SchemaCategory, SchemaDto, SchemasState } from '@app/shared';
 import { map } from 'rxjs/operators';
 import { SchemaCloning } from './../messages';
 
@@ -23,6 +23,10 @@ export class SchemasPageComponent extends ResourceOwner implements OnInit {
 
     public schemasFilter = new FormControl();
 
+    public schemaFilterFunction =
+        this.schemasFilter.valueChanges.pipe(
+            map(buildSchemaFilterFunction));
+
     public import: any;
 
     constructor(

frontend/app/shared/components/schema-category.component.ts

@@ -14,7 +14,7 @@ import { Settings } from '../state/settings';
 const ITEM_HEIGHT = 2.5;
 
 @Component({
-    selector: 'sqx-schema-category',
+    selector: 'sqx-schema-category[schemaCategory]',
     styleUrls: ['./schema-category.component.scss'],
     templateUrl: './schema-category.component.html',
     animations: [
@@ -30,7 +30,7 @@ export class SchemaCategoryComponent implements OnChanges {
     public schemaCategory: SchemaCategory;
 
     @Input()
-    public schemasFilter: string;
+    public schemasFilter?: ((schema: SchemaDto) => boolean) | null;
 
     @Input()
     public forContent?: boolean | null;
@@ -62,13 +62,11 @@ export class SchemaCategoryComponent implements OnChanges {
             this.filteredSchemas = this.filteredSchemas.filter(x => !app.roleProperties[Settings.AppProperties.HIDE_CONTENTS(x.name)]);
         }
 
-        if (this.schemasFilter) {
-            const terms = this.schemasFilter.trim().split(' ').map(x => new RegExp(x.trim(), 'i'));
-            const matches = (value: string | undefined | null) => value && terms.every(term => value.search(term) >= 0);
-            this.filteredSchemas = this.filteredSchemas.filter(x => 
-                matches(x.name) || 
-                matches(x.properties.label) || 
-                matches(x.properties.hints));
+        const filter = this.schemasFilter;
+
+        if (filter) {
+            this.filteredSchemas = this.filteredSchemas.filter(x => filter(x));
+
             this.isCollapsed = false;
         } else {
             this.isCollapsed = this.localStore.getBoolean(this.configKey());

frontend/app/shared/state/schemas.state.ts

@@ -419,3 +419,16 @@ function buildCategories(categories: Set<string>, allSchemas: SchemasList): Read
 
     return result;
 }
+
+export function buildSchemaFilterFunction(filter: string): (schema: SchemaDto) => boolean {
+    const terms = filter.split(' ').map(filter => new RegExp(filter.trim(), 'i'));
+
+    const matches = (value: string | undefined | null) => {
+        return !!value && terms.every(term => value.search(term) >= 0);
+    };
+
+    return (schema: SchemaDto) =>
+        matches(schema.name) ||
+        matches(schema.properties.label) ||
+        matches(schema.properties.hints);
+}