re-structure to monorepo.

packages/webapp/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import '@/style/components/Skeleton.scss';
+
+import { randomNumber } from '@/utils';
+
+/**
+ * Skeleton component.
+ */
+export function Skeleton({
+  Tag = 'span',
+  minWidth = 40,
+  maxWidth = 100,
+  children,
+}) {
+  const randomWidth = useMemo(
+    () => randomNumber(minWidth, maxWidth),
+    [minWidth, maxWidth],
+  );
+  return (
+    <Tag
+      className={'skeleton'}
+      style={{ width: `${randomWidth}%` }}
+      children={children}
+    />
+  );
+}

packages/webapp/src/components/Skeleton/SkeletonText.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React, { useMemo } from 'react';
+import '@/style/components/Skeleton.scss';
+
+import { randomNumber } from '@/utils';
+
+export function SkeletonText({
+  Tag = 'span',
+  charsLength,
+  minChars = 40,
+  maxChars = 100,
+}) {
+  const computedCharLength = useMemo(
+    () => (charsLength ? charsLength : randomNumber(minChars, maxChars)),
+    [charsLength, minChars, maxChars],
+  );
+  const randamText = 'X'.repeat(computedCharLength);
+
+  return <Tag className={'skeleton'}>{randamText}</Tag>;
+}

packages/webapp/src/components/Skeleton/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+export * from './Skeleton';
+export * from './SkeletonText';