feat(block): add loading status to block header

src/components/calcite-block/calcite-block.e2e.ts

@@ -248,6 +248,23 @@ describe("calcite-block", () => {
       expect(statusIcon).not.toBeNull();
     });
 
+    it("displays a loading icon  when `loading` is set to true and `open` is set to false", async () => {
+      const page = await newE2EPage();
+      await page.setContent(
+        `<calcite-block status="invalid" loading>
+          <div class="header-icon" slot=${SLOTS.icon} /></calcite-block>
+        </calcite-block>`
+      );
+
+      const headerIcon = await page.find("calcite-block >>> .header-icon");
+      expect(headerIcon).toBeNull();
+
+      const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
+      const loadingIcon = await page.find(`calcite-block >>> .loading`);
+      expect(statusIcon).not.toBeNull();
+      expect(loadingIcon).not.toBeNull();
+    });
+
     it("allows users to slot in actions in a header menu", async () => {
       const page = await newE2EPage({
         html: html` <calcite-block heading="With header actions" summary="has header actions">

src/components/calcite-block/calcite-block.scss

@@ -108,6 +108,22 @@ calcite-handle {
   color: theme("colors.danger");
 }
 
+.status-icon.loading {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 .toggle-icon {
   @apply mr-4
   self-center

src/components/calcite-block/calcite-block.tsx

@@ -135,7 +135,9 @@ export class CalciteBlock {
   renderIcon(): VNode[] {
     const { el, status } = this;
 
-    const icon = ICONS[status] ?? false;
+    const loadingStatus = this.loading && !this.open;
+
+    const icon = loadingStatus ? ICONS.refresh : ICONS[status] ?? false;
 
     const hasIcon = getSlotted(el, SLOTS.icon) || icon;
 
@@ -146,7 +148,8 @@ export class CalciteBlock {
         class={{
           [CSS.statusIcon]: true,
           [CSS.valid]: status == "valid",
-          [CSS.invalid]: status == "invalid"
+          [CSS.invalid]: status == "invalid",
+          [CSS.loading]: loadingStatus
         }}
         icon={icon}
         scale="m"

src/components/calcite-block/resources.ts

@@ -13,7 +13,8 @@ export const CSS = {
   summary: "summary",
   controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid"
+  invalid: "invalid",
+  loading: "loading"
 };
 
 export const TEXT = {
@@ -33,7 +34,8 @@ export const ICONS = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
-  invalid: "exclamation-mark-triangle"
+  invalid: "exclamation-mark-triangle",
+  refresh: "refresh"
 };
 
 export const HEADING_LEVEL = 4;

src/demos/calcite-block.html

@@ -84,6 +84,26 @@
       </div>
     </div>
 
+    <!-- switch collapsible + no controls + loading -->
+    <div class="parent">
+      <div class="child right-aligned-text">switch collapsible + no controls + loading</div>
+
+      <div class="child">
+        <calcite-block heading="Heading" summary="summary" loading collapsible>
+          <calcite-block-section text="input block-section w/ switch" toggle-display="switch">
+            <calcite-input
+              icon="form-field"
+              placeholder="This is an input field... enter something here"
+            ></calcite-input>
+          </calcite-block-section>
+
+          <calcite-block-section text="a block-section w/ button">
+            <calcite-input icon="form-field" placeholder="This is another input field"></calcite-input>
+          </calcite-block-section>
+        </calcite-block>
+      </div>
+    </div>
+
     <hr />
 
     <!-- collapsible + controls + icons -->