feat: only show editor loader for slow documents

src/components/editor-loader.tsx

@@ -1,13 +1,25 @@
 import { DefaultEditorLoader } from '@powerhousedao/design-system';
-import { ReactNode } from 'react';
+import { ComponentProps, ReactNode, useEffect, useState } from 'react';
 
-type Props = {
+type Props = ComponentProps<typeof DefaultEditorLoader> & {
+    loadingTimeout?: number;
     customEditorLoader?: ReactNode;
 };
 export function EditorLoader(props: Props) {
-    const { customEditorLoader } = props;
+    const [showLoading, setShowLoading] = useState(false);
+
+    // only shows the loader after some time has passed
+    useEffect(() => {
+        setTimeout(() => {
+            setShowLoading(true);
+        }, props.loadingTimeout ?? 200);
+    }, [props]);
+
+    if (!showLoading) return null;
+
+    const { customEditorLoader, ...defaultProps } = props;
 
     if (customEditorLoader) return <>{customEditorLoader}</>;
 
-    return <DefaultEditorLoader />;
+    return <DefaultEditorLoader {...defaultProps} />;
 }

src/components/editors.tsx

@@ -151,7 +151,10 @@ export function DocumentEditor(props: EditorProps) {
     }
 
     if (isLoadingDocument || isLoadingEditor) {
-        return <EditorLoader />;
+        const message = isLoadingDocument
+            ? 'Loading document'
+            : 'Loading editor';
+        return <EditorLoader message={message} />;
     }
 
     if (selectedNode?.kind !== FILE) {