feat(Loading): support explicit ID (#5798)

This change supports specifying explicit ID to `<Loading>`. It allows application to avoid rendering mismatch between SSR/CSR. Fixes #5796.
carbon-design-system · Apr 3, 2020 · 2e21f40 · 2e21f40
1 parent acf0592
commit 2e21f40
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2937,6 +2937,9 @@ Map {
       "description": Object {
         "type": "string",
       },
+      "id": Object {
+        "type": "string",
+      },
       "small": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
@@ -15,6 +15,7 @@ const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 function Loading({
+  id,
   active,
   className: customClassName,
   withOverlay,
@@ -32,7 +33,7 @@ function Loading({
     [`${prefix}--loading-overlay`]: true,
     [`${prefix}--loading-overlay--stop`]: !active,
   });
-  const loadingId = `loading-id-${instanceId}`;
+  const loadingId = id || `loading-id-${instanceId}`;
   const spinnerRadius = small ? '26.8125' : '37.5';
 
   const loading = (
@@ -73,6 +74,11 @@ function Loading({
 }
 
 Loading.propTypes = {
+  /**
+   * Provide an `id` to uniquely identify the label
+   */
+  id: PropTypes.string,
+
   /**
    * Specify whether you want the loading indicator to be spinning or not
    */