refactoring: migrating to react-query to manage service-side state.

client/src/components/Skeleton.js

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