feat: only show editor loader for slow documents

package.json

@@ -90,7 +90,7 @@
         "xvfb-maybe": "^0.2.1"
     },
     "dependencies": {
-        "@powerhousedao/design-system": "^1.0.0-alpha.167",
+        "@powerhousedao/design-system": "^1.0.0-alpha.168",
         "@sentry/react": "^7.109.0",
         "@sentry/vite-plugin": "^2.22.2",
         "@tanstack/react-virtual": "^3.8.1",

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

@@ -75,7 +75,7 @@ export function DocumentEditor(props: EditorProps) {
         initialDocument,
     );
     const context: EditorContext = useMemo(
-        () => ({ theme, user: user }),
+        () => ({ theme, user }),
         [theme, user],
     );
     const userPermissions = useUserPermissions();
@@ -151,20 +151,18 @@ 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) {
         return null;
     }
 
     if (!documentModel) {
-        return (
-            <h3>
-                Document of type {fileNodeDocument?.documentType} is not
-                supported.
-            </h3>
-        );
+        return <h3>Document of type {documentType} is not supported.</h3>;
     }
 
     if (!editor) {

src/hooks/useDocumentDriveServer.ts

@@ -512,8 +512,8 @@ export function useDocumentDriveServer(
     );
 
     const deleteDrive = useCallback(
-        async (id: string, force = false) => {
-            if (!force && !isAllowedToCreateDocuments) {
+        async (id: string) => {
+            if (!isAllowedToCreateDocuments) {
                 throw new Error('User is not allowed to delete drives');
             }
             if (!server) {