Skeleton Component

components/ui/Skeleton/Skeleton.module.css

@@ -0,0 +1,59 @@
+.skeleton {
+  @apply block rounded-md;
+
+  &.loaded {
+    width: unset !important;
+  }
+
+  &:not(.wrapper):not(.show) {
+    display: none;
+  }
+
+  &::not(.wrapper):not(.loaded) {
+    background-image: linear-gradient(
+      270deg,
+      var(--accents-1),
+      var(--accents-2),
+      var(--accents-2),
+      var(--accents-1)
+    );
+    background-size: 400% 100%;
+    animation: loading 8s ease-in-out infinite;
+  }
+}
+
+.wrapper {
+  @apply block relative;
+
+  &:not(.show)::before {
+    content: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    background-image: linear-gradient(
+      270deg,
+      var(--accents-1),
+      var(--accents-2),
+      var(--accents-2),
+      var(--accents-1)
+    );
+    background-size: 400% 100%;
+    animation: loading 8s ease-in-out infinite;
+  }
+}
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties } from 'react'
+import cn from 'classnames'
+import px from '@lib/to-pixels'
+import s from './skeleton.module.css'
+
+interface Props {
+  width?: string | number
+  height?: string | number
+  boxHeight?: string | number
+  style?: CSSProperties
+  show?: boolean
+  block?: boolean
+  className?: string
+}
+
+const Skeleton: React.FC<Props> = ({
+  style,
+  width,
+  height,
+  children,
+  className,
+  show = true,
+  boxHeight = height,
+}) => {
+  // Automatically calculate the size if there are children
+  // and no fixed sizes are specified
+  const shouldAutoSize = !!children && !(width || height)
+
+  // Defaults
+  width = width || 24
+  height = height || 24
+  boxHeight = boxHeight || height
+
+  return (
+    <span
+      className={cn(s.skeleton, className, {
+        [s.show]: show,
+        [s.wrapper]: shouldAutoSize,
+        [s.loaded]: !shouldAutoSize && !!children,
+      })}
+      style={
+        shouldAutoSize
+          ? {}
+          : {
+              minWidth: px(width),
+              minHeight: px(height),
+              marginBottom: `calc(${px(boxHeight)} - ${px(height)})`,
+              ...style,
+            }
+      }
+    >
+      {children}
+    </span>
+  )
+}
+
+export default Skeleton

components/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export { default } from './Skeleton'