feat(content-drive): #33753 implement virtual scroll with lazy loading for content type filter

core-web/apps/dotcms-ui/src/main.ts

@@ -1,6 +1,8 @@
 import { enableProdMode } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
+import { defineCustomElements } from '@dotcms/dotcms-webcomponents/loader';
+
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 import { environment } from './environments/environment';
@@ -10,3 +12,5 @@ if (environment.production) {
 }
 
 bootstrapApplication(AppComponent, appConfig);
+
+defineCustomElements();

core-web/libs/portlets/dot-content-drive/portlet/src/lib/components/dot-content-drive-toolbar/components/dot-content-drive-content-type-field/dot-content-drive-content-type-field.component.html

@@ -9,12 +9,15 @@
     [emptyFilterMessage]="'content-drive.content-type-field.empty-state' | dm"
     (onChange)="onChange()"
     (onClear)="onChange()"
-    [resetFilterOnHide]="true"
     (onFilter)="onFilter($event)"
     (onPanelHide)="onPanelHide()"
+    [resetFilterOnHide]="true"
+    [lazy]="true"
+    (onLazyLoad)="onLazyLoad($event)"
+    [virtualScroll]="true"
+    [virtualScrollItemSize]="38.5"
     [placeholder]="'content-drive.content-type.placeholder' | dm"
     [showClear]="false"
-    [scrollHeight]="MULTISELECT_SCROLL_HEIGHT"
     data-testid="content-type-field"
     class="w-full">
     <ng-template pTemplate="item" let-item>