fix: fix #skeleton wrapper issue and remove __inner to simplify and m…

…ake it more robust for ssr
dnbexperience · Jul 4, 2020 · b2eb2a8 · b2eb2a8
1 parent 7a1d074
commit b2eb2a8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 38 deletions.
diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -436,7 +436,7 @@ export default class Input extends React.PureComponent {
     const shellParams = {
       className: classnames(
         'dnb-input__shell',
-        skeleton && 'dnb-skeleton'
+        isTrue(skeleton) && 'dnb-skeleton'
       ),
       'data-input-state': inputState,
       'data-has-content': hasValue ? 'true' : 'false'

diff --git a/packages/dnb-ui-lib/src/components/skeleton/SkeletonHelper.js b/packages/dnb-ui-lib/src/components/skeleton/SkeletonHelper.js
@@ -56,22 +56,8 @@ export class AutoSize extends React.PureComponent {
         const countChars = string.length
 
         try {
-          this.skeletonElem = document.createElement('span')
-          this.skeletonElem.classList.add(
-            'dnb-skeleton',
-            'dnb-skeleton__inner'
-          )
-
-          this.skeletonElem.setAttribute(
-            'data-skeleton-chars',
-            String(countChars)
-          )
-          this.skeletonElem.style.setProperty(
-            '--skeleton-chars',
-            `${countChars}ch`
-          )
-
-          elem.appendChild(this.skeletonElem)
+          elem.setAttribute('data-skeleton-chars', String(countChars))
+          elem.style.setProperty('--skeleton-chars', `${countChars}ch`)
         } catch (e) {
           //
         }
@@ -85,7 +71,6 @@ export class AutoSize extends React.PureComponent {
     if (elem) {
       try {
         elem.removeAttribute('data-skeleton-chars')
-        elem.removeChild(this.skeletonElem)
       } catch (e) {
         //
       }

diff --git a/packages/dnb-ui-lib/src/components/skeleton/style/_skeleton.scss b/packages/dnb-ui-lib/src/components/skeleton/style/_skeleton.scss
@@ -6,20 +6,17 @@
  */
 
 .dnb-skeleton {
-  &,
-  &__wrapper {
-    position: relative;
-    overflow: hidden;
-
-    // display: inline-flex;// do not change the display!
-    &:not(.dnb-input__shell) {
-      border-radius: 0.25rem;
-    }
+  position: relative;
+  overflow: hidden;
 
-    pointer-events: none;
-    // cursor: progress;// does not show if pointer-events is set to none
+  // display: inline-flex;// do not change the display!
+  &:not(.dnb-input__shell) {
+    border-radius: 0.25rem;
   }
 
+  pointer-events: none;
+  // cursor: progress;// does not show if pointer-events is set to none
+
   &--block {
     display: block;
   }
@@ -33,14 +30,8 @@
     }
   }
 
-  &__inner {
-    position: absolute;
-    z-index: 100;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: var(--skeleton-chars);
+  &[data-skeleton-chars] {
+    max-width: var(--skeleton-chars);
   }
 
   &::before,

diff --git a/packages/dnb-ui-lib/src/elements/Element.js b/packages/dnb-ui-lib/src/elements/Element.js
@@ -51,7 +51,8 @@ class ElemComponent extends React.PureComponent {
       !hasTagClass &&
         !new RegExp(`${tagClass}(\\s|$)`).test(String(className)) &&
         tagClass,
-      skeleton && 'dnb-skeleton__wrapper',
+      // skeleton && 'dnb-skeleton__wrapper',
+      isTrue(skeleton) && 'dnb-skeleton',
       className,
       _className,
       css,