fix(block): removes extra loading indicator (#7239)

**Related Issue:** #6485

## Summary

`calcite-block header` had two loading indicators. This removes the
extra `calcite-loader` from the right end, and places it as an option in
`icon-slot`,`statusIcons: valid or invalid` as well as `controls` now
appear regardless of `loading` state.

Author: Elijbet

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

@@ -252,9 +252,10 @@ describe("calcite-block", () => {
       expect(headerIconEle).toBeNull();
 
       const statusIcon = await page.find(`calcite-block >>> .${CSS.statusIcon}`);
-      const loadingIcon = await page.find(`calcite-block >>> .${CSS.loading}`);
-      expect(statusIcon).not.toBeNull();
-      expect(loadingIcon).not.toBeNull();
+      const loader = await page.find(`calcite-block >>> calcite-loader`);
+
+      expect(statusIcon).toBeNull();
+      expect(loader).not.toBeNull();
     });
 
     it("allows users to slot in actions in a header menu", async () => {

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

@@ -106,10 +106,6 @@ calcite-handle {
   color: theme("colors.danger");
 }
 
-.status-icon.loading {
-  animation: spin scaleDuration(--calcite-internal-animation-timing-slow, 2) linear infinite;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);

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

@@ -237,23 +237,22 @@ export class Block
   }
 
   renderIcon(): VNode[] {
-    const { el, status } = this;
+    const { el, loading, messages, status } = this;
 
-    const showingLoadingStatus = this.loading && !this.open;
-
-    const statusIcon = showingLoadingStatus ? ICONS.refresh : ICONS[status];
+    const statusIcon = ICONS[status];
 
     const hasIcon = getSlotted(el, SLOTS.icon) || statusIcon;
 
     const iconEl = !statusIcon ? (
       <slot key="icon-slot" name={SLOTS.icon} />
+    ) : loading ? (
+      <calcite-loader inline label={messages.loading} />
     ) : (
       <calcite-icon
         class={{
           [CSS.statusIcon]: true,
           [CSS.valid]: status == "valid",
-          [CSS.invalid]: status == "invalid",
-          [CSS.loading]: showingLoadingStatus
+          [CSS.invalid]: status == "invalid"
         }}
         icon={statusIcon}
         scale="m"
@@ -321,9 +320,7 @@ export class Block
         ) : (
           headerContent
         )}
-        {loading ? (
-          <calcite-loader inline label={messages.loading} />
-        ) : hasControl ? (
+        {hasControl ? (
           <div class={CSS.controlContainer}>
             <slot name={SLOTS.control} />
           </div>

packages/calcite-components/src/components/block/resources.ts

@@ -14,8 +14,7 @@ export const CSS = {
   description: "description",
   controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid",
-  loading: "loading"
+  invalid: "invalid"
 };
 
 export const TEXT = {
@@ -35,6 +34,5 @@ export const ICONS = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
-  invalid: "exclamation-mark-triangle",
-  refresh: "refresh"
+  invalid: "exclamation-mark-triangle"
 };

packages/calcite-components/src/components/interfaces.ts

@@ -19,5 +19,4 @@ export type SelectionMode =
   | "multiple";
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
-
 export type Width = "auto" | "half" | "full";