Skeleton loader for booking widget on desktop

components/SkeletonShimmer/index.tsx

@@ -0,0 +1,19 @@
+import styles from "./skeleton.module.css"
+
+export default function SkeletonShimmer({
+  height,
+  width,
+}: {
+  height?: string
+  width?: string
+}) {
+  return (
+    <div
+      className={styles.shimmer}
+      style={{
+        height: height,
+        width: width,
+      }}
+    />
+  )
+}

components/SkeletonShimmer/skeleton.module.css

@@ -0,0 +1,29 @@
+.shimmer {
+  background-color: hsla(0, 0%, 85%, 0.5);
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  min-height: 1em;
+}
+.shimmer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.2) 20%,
+    rgba(255, 255, 255, 0.5) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: shimmer 3s infinite;
+  content: "";
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}