fix(scrim): update loader scale on resize of component. (#7419)

**Related Issue:** #7420

## Summary

- Correctly starts observing the resize observer
- Adds tests

Author: driskull

packages/calcite-components/src/components/scrim/scrim.e2e.ts

@@ -110,7 +110,8 @@ describe("calcite-scrim", () => {
   });
 
   describe("Responsive loading spinner", () => {
-    const testValues: { width: number; height: number; scale: Scale }[] = [
+    type ScaleSize = { width: number; height: number; scale: Scale };
+    const testValues: ScaleSize[] = [
       {
         width: BREAKPOINTS.s - 1,
         height: 800,
@@ -166,6 +167,45 @@ describe("calcite-scrim", () => {
         expect(await loader.getProperty("scale")).toBe(scaleSize.scale);
       });
     });
+
+    it("should responsively scale loading spinner on resize", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<style>
+          .scrim-container {
+            display: flex;
+            flex: 1;
+            position: relative;
+            overflow: auto;
+          }
+        </style>
+        <div class="scrim-container">
+          <calcite-scrim loading><p>I'm a panel that is loading.</p></calcite-scrim>
+        </div>`);
+      await page.waitForChanges();
+
+      for (let i = 0; i < testValues.length; i++) {
+        const { width, height, scale } = testValues[i];
+        const scrimContainer = await page.find(".scrim-container");
+        expect(scrimContainer).toBeDefined();
+        await page.$eval(
+          ".scrim-container",
+          (scrimContainer: HTMLElement, width: number, height: number) => {
+            scrimContainer.style.width = `${width}px`;
+            scrimContainer.style.height = `${height}px`;
+          },
+          width,
+          height
+        );
+        await page.waitForChanges();
+        const style = await scrimContainer.getComputedStyle();
+        expect(style.width).toBe(`${width}px`);
+        expect(style.height).toBe(`${height}px`);
+        const loader = await page.find("calcite-scrim >>> calcite-loader");
+        expect(loader).toBeDefined();
+        expect(await loader.isVisible()).toBe(true);
+        expect(await loader.getProperty("scale")).toBe(scale);
+      }
+    });
   });
 
   describe("CSS properties for light/dark modes", () => {

packages/calcite-components/src/components/scrim/scrim.tsx

@@ -84,6 +84,7 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    this.resizeObserver?.observe(this.el);
   }
 
   async componentWillLoad(): Promise<void> {
@@ -93,6 +94,7 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   disconnectedCallback(): void {
     disconnectLocalized(this);
     disconnectMessages(this);
+    this.resizeObserver?.disconnect();
   }
 
   // --------------------------------------------------------------------------

packages/calcite-components/src/demos/scrim.html

@@ -39,9 +39,12 @@ <h1 style="margin: 0 auto; text-align: center">Scrim</h1>
       <div class="parent">
         <div class="child">
           Default
-          <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
+          <div
+            tabindex="0"
+            style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto"
+          >
             <calcite-scrim></calcite-scrim>
-            <div style="width: 400px; height: 400px; overflow: auto">
+            <div style="width: 100%; height: 100%; overflow: auto">
               <p>
                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                 tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
@@ -72,9 +75,12 @@ <h1 style="margin: 0 auto; text-align: center">Scrim</h1>
         <!-- loading scrim panel -->
         <div class="child">
           Loading
-          <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
+          <div
+            tabindex="0"
+            style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto"
+          >
             <calcite-scrim loading></calcite-scrim>
-            <div style="width: 400px; height: 400px; overflow: auto">
+            <div style="width: 100%; height: 100%; overflow: auto">
               <p>
                 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
                 tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas