feat: add skeleton to drawer component

react/Drawer.tsx

@@ -23,6 +23,7 @@ import useLockScroll from './modules/useLockScroll'
 import DrawerCloseButton from './DrawerCloseButton'
 import { DrawerContextProvider } from './DrawerContext'
 import { isElementInsideLink } from './modules/isElementInsideLink'
+import Skeleton from './Skeleton'
 
 const Swipable = React.lazy(() => import('./Swipable'))
 
@@ -138,6 +139,7 @@ function Drawer(props: Props) {
   const { state: menuState, openMenu, closeMenu } = useMenuState()
   const { isOpen: isMenuOpen, hasBeenOpened: hasMenuBeenOpened } = menuState
   const [isMoving, setIsMoving] = useState(false)
+  const [shouldRenderChildrenNow, setShouldRenderChildrenNow] = useState(false)
 
   // Always add the listener for 'openDrawer' events, since they're sent by
   // the drawer-trigger block.
@@ -159,6 +161,14 @@ function Drawer(props: Props) {
     }
   }, [onVisibilityChanged, isMenuOpen])
 
+  useEffect(() => {
+    if (isMenuOpen && !shouldRenderChildrenNow) {
+      setTimeout(() => {
+        setShouldRenderChildrenNow(true)
+      }, 0)
+    }
+  }, [isMenuOpen, shouldRenderChildrenNow])
+
   const handleContainerClick: MouseEventHandler<HTMLElement> = event => {
     // target is the clicked element
     // currentTarget is the element which was attached the event (e.g. the container)
@@ -254,7 +264,8 @@ function Drawer(props: Props) {
                 className={`${handles.childrenContainer} flex flex-grow-1`}
                 onClick={handleContainerClick}
               >
-                {shouldRenderChildren && children}
+                {shouldRenderChildren &&
+                  (shouldRenderChildrenNow ? children : <Skeleton />)}
               </div>
               {/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             </div>

react/Skeleton.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useCssHandles } from 'vtex.css-handles'
+
+const CSS_HANDLES = ['skeletonContainer', 'skeletonItem'] as const
+
+function Skeleton() {
+  const handles = useCssHandles(CSS_HANDLES)
+
+  return (
+    <div className={`${handles.skeletonContainer} pa4`}>
+      <div
+        className={`${handles.skeletonItem} mb4 bg-muted-5 br2`}
+        style={{ height: '20px', width: '60%' }}
+      />
+      <div
+        className={`${handles.skeletonItem} mb4 bg-muted-5 br2`}
+        style={{ height: '20px', width: '80%' }}
+      />
+      <div
+        className={`${handles.skeletonItem} mb4 bg-muted-5 br2`}
+        style={{ height: '20px', width: '40%' }}
+      />
+    </div>
+  )
+}
+
+export default Skeleton