feat(loading): integrate Loading, InlineLoading with v11

COMPONENT_INDEX.md

@@ -1911,11 +1911,11 @@ None.
 ### Props
 
 | Prop name       | Required | Kind             | Reactive | Type                                                                     | Default value          | Description                                                                                                                          |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
 | status          | No       | <code>let</code> | No       | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code>  | Set the loading status                                                                                                               |
 | description     | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Set the loading description                                                                                                          |
-| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
+| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` value for the<br /> "error" and "finished" states.         |
-| successDelay    | No       | <code>let</code> | No       | <code>number</code>                                                      | <code>1500</code>      | Specify the timeout delay (ms) after `status` is set to "success"                                                    |
+| successDelay    | No       | <code>let</code> | No       | <code>number</code>                                                      | <code>1500</code>      | Specify the timeout delay (ms) after `status` is set to "finished".<br />The `on:success` event will be dispatched after this delay. |
 
 ### Slots
 
@@ -1925,10 +1925,6 @@ None.
 
 | Event name | Type       | Detail            |
 | :--------- | :--------- | :---------------- |
-| click      | forwarded  | --                |
-| mouseover  | forwarded  | --                |
-| mouseenter | forwarded  | --                |
-| mouseleave | forwarded  | --                |
 | success    | dispatched | <code>null</code> |
 
 ## `InlineNotification`

docs/src/COMPONENT_API.json

@@ -5543,7 +5543,7 @@
         {
           "name": "iconDescription",
           "kind": "let",
-          "description": "Specify a description for the loading icon.\nDefaults to the `status` prop for the \"error\" and \"finished\" states",
+          "description": "Specify a description for the loading icon.\nDefaults to the `status` value for the\n \"error\" and \"finished\" states.",
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -5554,7 +5554,7 @@
         {
           "name": "successDelay",
           "kind": "let",
-          "description": "Specify the timeout delay (ms) after `status` is set to \"success\"",
+          "description": "Specify the timeout delay (ms) after `status` is set to \"finished\".\nThe `on:success` event will be dispatched after this delay.",
           "type": "number",
           "value": "1500",
           "isFunction": false,
@@ -5566,13 +5566,7 @@
       ],
       "moduleExports": [],
       "slots": [],
-      "events": [
+      "events": [{ "type": "dispatched", "name": "success", "detail": "null" }],
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "dispatched", "name": "success", "detail": "null" }
-      ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },

src/InlineLoading/InlineLoading.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+
   /**
    * Set the loading status
    * @type {"active" | "inactive" | "finished" | "error"}
@@ -13,21 +15,27 @@
 
   /**
    * Specify a description for the loading icon.
-   * Defaults to the `status` prop for the "error" and "finished" states
+   * Defaults to the `status` value for the
+   *  "error" and "finished" states.
    * @type {string}
    */
   export let iconDescription = undefined;
 
-  /** Specify the timeout delay (ms) after `status` is set to "success" */
+  /**
+   * Specify the timeout delay (ms) after `status` is set to "finished".
+   * The `on:success` event will be dispatched after this delay.
+  */
   export let successDelay = 1500;
 
-  import { createEventDispatcher, afterUpdate, onMount } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
   import ErrorFilled from "../icons/ErrorFilled.svelte";
   import Loading from "../Loading/Loading.svelte";
 
+  /** @type {import("svelte").EventDispatcher<{ success: null }>} */
   const dispatch = createEventDispatcher();
 
+  /** @type {NodeJS.Timeout} */
   let timeout = undefined;
 
   onMount(() => {
@@ -36,26 +44,16 @@
     };
   });
 
-  afterUpdate(() => {
+  $: if (status === "finished") {
-    if (status === "finished") {
+    if (timeout) clearTimeout(timeout);
+
     timeout = setTimeout(() => {
       dispatch("success");
     }, successDelay);
   }
-  });
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div class:bx--inline-loading="{true}" aria-live="assertive" {...$$restProps}>
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class:bx--inline-loading="{true}"
-  aria-live="assertive"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave
->
   <div class:bx--inline-loading__animation="{true}">
     {#if status === "error"}
       <ErrorFilled

src/Loading/Loading.svelte

@@ -1,4 +1,6 @@
 <script>
+  // @ts-check
+  
   /** Set to `true` to use the small variant */
   export let small = false;
 

types/InlineLoading/InlineLoading.svelte.d.ts

@@ -18,13 +18,15 @@ export interface InlineLoadingProps extends RestProps {
 
   /**
    * Specify a description for the loading icon.
-   * Defaults to the `status` prop for the "error" and "finished" states
+   * Defaults to the `status` value for the
+   *  "error" and "finished" states.
    * @default undefined
    */
   iconDescription?: string;
 
   /**
-   * Specify the timeout delay (ms) after `status` is set to "success"
+   * Specify the timeout delay (ms) after `status` is set to "finished".
+   * The `on:success` event will be dispatched after this delay.
    * @default 1500
    */
   successDelay?: number;
@@ -34,12 +36,6 @@ export interface InlineLoadingProps extends RestProps {
 
 export default class InlineLoading extends SvelteComponentTyped<
   InlineLoadingProps,
-  {
+  { success: CustomEvent<null> },
-    click: WindowEventMap["click"];
-    mouseover: WindowEventMap["mouseover"];
-    mouseenter: WindowEventMap["mouseenter"];
-    mouseleave: WindowEventMap["mouseleave"];
-    success: CustomEvent<null>;
-  },
   {}
 > {}