refactor(validation-container): Cached slot generation

Author: rkaraivanov

src/components/validation-container/validation-container.ts

@@ -1,5 +1,6 @@
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -25,6 +26,7 @@ interface ValidationContainerConfig {
 
 const VALIDATION_SLOTS_SELECTOR = 'slot:not([name="helper-text"])';
 const ALL_SLOTS_SELECTOR = 'slot';
+const QUERY_CONFIG: AssignedNodesOptions = { flatten: true };
 
 function getValidationSlots(
   element: IgcValidationContainerComponent
@@ -38,7 +40,7 @@ function hasProjection(element: IgcValidationContainerComponent): boolean {
   const allSlots =
     element.renderRoot.querySelectorAll<HTMLSlotElement>(ALL_SLOTS_SELECTOR);
   return Array.from(allSlots).every((slot) =>
-    isEmpty(slot.assignedElements({ flatten: true }))
+    isEmpty(slot.assignedElements(QUERY_CONFIG))
   );
 }
 
@@ -47,15 +49,14 @@ function hasProjectedValidation(
   slotName?: string
 ): boolean {
   const slots = Array.from(getValidationSlots(element));
-  const config: AssignedNodesOptions = { flatten: true };
 
   if (slotName) {
     return slots
       .filter((slot) => slot.name === slotName)
-      .some((slot) => !isEmpty(slot.assignedElements(config)));
+      .some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
   }
 
-  return slots.some((slot) => !isEmpty(slot.assignedElements(config)));
+  return slots.some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
 }
 
 /* blazorSuppress */
@@ -208,9 +209,9 @@ export default class IgcValidationContainerComponent extends LitElement {
   }
 
   protected override render(): TemplateResult {
-    const slots = this.invalid
-      ? this._renderValidationSlots(this.target.validity)
-      : nothing;
+    const slots = cache(
+      this.invalid ? this._renderValidationSlots(this.target.validity) : nothing
+    );
 
     return html`
       <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>