Loaders to be consistent with the new api of the SkeletonPiece comp…

…onent.
vtex-apps · Apr 25, 2019 · edbe11b · edbe11b
1 parent 0f58b98
commit edbe11b
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 87 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- Loaders to be consistent with the new api of the `SkeletonPiece` component.
+
 ## [0.26.0] - 2019-04-22
 
 ### Added

diff --git a/react/components/loaders/AddressCreateLoading.js b/react/components/loaders/AddressCreateLoading.js
@@ -1,30 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  SkeletonPiece,
-  SkeletonBox,
-  BaseLoading,
-} from 'vtex.my-account-commons'
+import { BaseLoading } from 'vtex.my-account-commons'
 
 import { headerConfig } from '../pages/AddressCreate'
+import FormLoader from './FormLoader'
 
 const AddressCreateLoading = ({ data }) => {
   return (
     <BaseLoading queryData={data} headerConfig={headerConfig()}>
-      <SkeletonBox shouldAllowGrowing maxWidthStep={6}>
-        <div className="mb8 mt4">
-          <SkeletonPiece width={100} />
-          <SkeletonPiece width={100} />
-        </div>
-        <div className="mb9">
-          <SkeletonPiece width={100} />
-          <SkeletonPiece width={100} />
-        </div>
-        <div className="mb8">
-          <SkeletonPiece width={40} />
-          <SkeletonPiece width={40} />
-        </div>
-      </SkeletonBox>
+      <FormLoader />
     </BaseLoading>
   )
 }

diff --git a/react/components/loaders/AddressEditLoading.js b/react/components/loaders/AddressEditLoading.js
@@ -1,27 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SkeletonPiece, SkeletonBox, BaseLoading } from 'vtex.my-account-commons'
+import { BaseLoading } from 'vtex.my-account-commons'
+
 import { headerConfig } from '../pages/AddressEdit'
+import FormLoader from './FormLoader'
 
 const AddressEditLoading = ({ data }) => {
   return (
     <BaseLoading queryData={data} headerConfig={headerConfig()}>
-      <main className="mt7 flex-ns flex-wrap-ns items-start-ns">
-        <SkeletonBox shouldAllowGrowing maxWidthStep={6}>
-          <div className="mb8 mt4">
-            <SkeletonPiece width={100} />
-            <SkeletonPiece width={100} />
-          </div>
-          <div className="mb9">
-            <SkeletonPiece width={100} />
-            <SkeletonPiece width={100} />
-          </div>
-          <div className="mb8">
-            <SkeletonPiece width={40} />
-            <SkeletonPiece width={40} />
-          </div>
-        </SkeletonBox>
-      </main>
+      <FormLoader />
     </BaseLoading>
   )
 }

diff --git a/react/components/loaders/AddressesLoading.js b/react/components/loaders/AddressesLoading.js
@@ -1,35 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { injectIntl, intlShape } from 'react-intl'
-import { SkeletonPiece, SkeletonBox, BaseLoading } from 'vtex.my-account-commons'
+import {
+  SkeletonPiece,
+  SkeletonBox,
+  BaseLoading,
+} from 'vtex.my-account-commons'
 import { headerConfig } from '../pages/Addresses'
 
 const AddressesLoading = ({ data, intl }) => {
   return (
     <BaseLoading queryData={data} headerConfig={headerConfig(intl)}>
       <main className="mt7 flex-ns flex-wrap-ns items-start-ns">
-        <SkeletonBox shouldShowLowerButton>
-          <div className="pv4 w5 h4">
-            <div className="mb4">
-              <SkeletonPiece width={70} />
+        {[0, 1].map(i => (
+          <SkeletonBox shouldShowLowerButton key={i}>
+            <div className="pv4 w5 h4">
+              <div className="mb4">
+                <SkeletonPiece width="70" size="3" />
+              </div>
+              <div className="mb4">
+                <SkeletonPiece width="40" size="3" />
+              </div>
+              <SkeletonPiece width="30" size="3" />
             </div>
-            <div className="mb4">
-              <SkeletonPiece width={40} />
-            </div>
-            <SkeletonPiece width={30} />
-          </div>
-        </SkeletonBox>
-        <SkeletonBox shouldShowLowerButton>
-          <div className="pv4 w5 h4">
-            <div className="mb4">
-              <SkeletonPiece width={70} />
-            </div>
-            <div className="mb4">
-              <SkeletonPiece width={40} />
-            </div>
-            <SkeletonPiece width={30} />
-          </div>
-        </SkeletonBox>
+          </SkeletonBox>
+        ))}
       </main>
     </BaseLoading>
   )

diff --git a/react/components/loaders/FormLoader.js b/react/components/loaders/FormLoader.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import { SkeletonPiece, SkeletonBox } from 'vtex.my-account-commons'
+
+const FormLoader = () => (
+  <SkeletonBox shouldAllowGrowing maxWidthStep={6}>
+    <div className="mb8 mt4">
+      <SkeletonPiece width="100" size="3" />
+      <SkeletonPiece width="100" size="3" />
+    </div>
+    <div className="mb9">
+      <SkeletonPiece width="100" size="3" />
+      <SkeletonPiece width="100" size="3" />
+    </div>
+    <div className="mb8">
+      <SkeletonPiece width="40" size="3" />
+      <SkeletonPiece width="40" size="3" />
+    </div>
+  </SkeletonBox>
+)
+
+export default FormLoader
diff --git a/react/components/loaders/ProfileEditLoading.js b/react/components/loaders/ProfileEditLoading.js
@@ -1,27 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SkeletonPiece, SkeletonBox, BaseLoading } from 'vtex.my-account-commons'
+import { BaseLoading } from 'vtex.my-account-commons'
+
 import { headerConfig } from '../pages/ProfileEdit'
+import FormLoader from './FormLoader'
 
 const ProfileEditLoading = ({ data }) => {
   return (
     <BaseLoading queryData={data} headerConfig={headerConfig()}>
-      <main className="mt7 flex-ns flex-wrap-ns items-start-ns">
-        <SkeletonBox shouldAllowGrowing maxWidthStep={6}>
-          <div className="mb8 mt4">
-            <SkeletonPiece width={100} />
-            <SkeletonPiece width={100} />
-          </div>
-          <div className="mb9">
-            <SkeletonPiece width={100} />
-            <SkeletonPiece width={100} />
-          </div>
-          <div className="mb8">
-            <SkeletonPiece width={40} />
-            <SkeletonPiece width={40} />
-          </div>
-        </SkeletonBox>
-      </main>
+      <FormLoader />
     </BaseLoading>
   )
 }

diff --git a/react/components/loaders/ProfileLoading.js b/react/components/loaders/ProfileLoading.js
@@ -1,6 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SkeletonPiece, SkeletonBox, BaseLoading } from 'vtex.my-account-commons'
+import {
+  SkeletonPiece,
+  SkeletonBox,
+  BaseLoading,
+} from 'vtex.my-account-commons'
 import { headerConfig } from '../pages/Profile'
 
 const ProfileLoading = ({ data }) => {
@@ -10,27 +14,25 @@ const ProfileLoading = ({ data }) => {
         <div className="w-60-ns w-100-s">
           <SkeletonBox shouldAllowGrowing shouldShowLowerButton>
             <div className="flex flex-wrap mb8 justify-between w5">
-              <SkeletonPiece width={40} />
-              <SkeletonPiece width={50} />
+              <SkeletonPiece width="40" size="4" />
+              <SkeletonPiece width="50" size="4" />
             </div>
             <div className="mb8">
-              <SkeletonPiece width={100} />
+              <SkeletonPiece size="4" />
             </div>
             <div className="flex flex-wrap mb8 justify-between">
-              <SkeletonPiece width={30} />
-              <SkeletonPiece width={50} />
+              <SkeletonPiece width="30" size="4" />
+              <SkeletonPiece width="50" size="4" />
             </div>
             <div className="flex flex-wrap mb8 justify-between">
-              <SkeletonPiece width={40} />
-              <SkeletonPiece width={50} />
+              <SkeletonPiece width="40" size="4" />
+              <SkeletonPiece width="50" size="4" />
             </div>
           </SkeletonBox>
         </div>
         <div className="w-40-ns w-100-s">
-          <SkeletonBox
-            shouldAllowGrowing
-            shouldShowLowerButton>
-            <SkeletonPiece width={100} />
+          <SkeletonBox shouldAllowGrowing shouldShowLowerButton>
+            <SkeletonPiece size="4" />
           </SkeletonBox>
         </div>
       </main>