refactor page editor

2023-11-24 18:03:53 +00:00
parent 21abde1054
commit 2a3db4e7cb
11 changed files with 173 additions and 141 deletions
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import { Skeleton } from '@mantine/core';
+
+function EditorSkeleton() {
+  const [showSkeleton, setShowSkeleton] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSkeleton(true), 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!showSkeleton) {
+    return null;
+  }
+
+  return (
+    <>
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+      <Skeleton height={12} mt={6} radius="xl" />
+    </>
+
+  );
+}
+
+export default EditorSkeleton;