From 8527bf85e37cfc8651e4539faad6b010ddff5122 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 19 Sep 2024 16:31:27 +0530 Subject: [PATCH] chore: show content loader untile the server has synced --- .../editors/document/collaborative-editor.tsx | 6 ++- .../collaborative-read-only-editor.tsx | 7 +++- .../core/components/editors/document/index.ts | 1 + .../components/editors/document/loader.tsx | 42 +++++++++++++++++++ .../core/hooks/use-collaborative-editor.ts | 22 ++++++++-- .../use-read-only-collaborative-editor.ts | 21 ++++++++-- 6 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 packages/editor/src/core/components/editors/document/loader.tsx diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx index 4d7008f2ecc..a008d5c60ba 100644 --- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx +++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx @@ -1,6 +1,6 @@ import React from "react"; // components -import { PageRenderer } from "@/components/editors"; +import { DocumentContentLoader, PageRenderer } from "@/components/editors"; // constants import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config"; // extensions @@ -42,7 +42,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => { } // use document editor - const { editor } = useCollaborativeEditor({ + const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({ disabledExtensions, editorClassName, embedHandler, @@ -67,6 +67,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => { if (!editor) return null; + if (!hasServerSynced && !hasServerConnectionFailed) return ; + return ( ; + return ( ( +
+ +
+
+ +
+ +
+ + +
+
+ +
+ + +
+ + +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+); diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts index 35456068301..5b71d81d472 100644 --- a/packages/editor/src/core/hooks/use-collaborative-editor.ts +++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts @@ -1,4 +1,4 @@ -import { useEffect, useLayoutEffect, useMemo } from "react"; +import { useEffect, useLayoutEffect, useMemo, useState } from "react"; import { HocuspocusProvider } from "@hocuspocus/provider"; import Collaboration from "@tiptap/extension-collaboration"; import { IndexeddbPersistence } from "y-indexeddb"; @@ -29,6 +29,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => { tabIndex, user, } = props; + // states + const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false); + const [hasServerSynced, setHasServerSynced] = useState(false); // initialize Hocuspocus provider const provider = useMemo( () => @@ -38,11 +41,18 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => { // using user id as a token to verify the user on the server token: user.id, url: realtimeConfig.url, - onAuthenticationFailed: () => serverHandler?.onServerError?.(), + onAuthenticationFailed: () => { + serverHandler?.onServerError?.(); + setHasServerConnectionFailed(true); + }, onConnect: () => serverHandler?.onConnect?.(), onClose: (data) => { - if (data.event.code === 1006) serverHandler?.onServerError?.(); + if (data.event.code === 1006) { + serverHandler?.onServerError?.(); + setHasServerConnectionFailed(true); + } }, + onSynced: () => setHasServerSynced(true), }), [id, realtimeConfig, serverHandler, user.id] ); @@ -92,5 +102,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => { tabIndex, }); - return { editor }; + return { + editor, + hasServerConnectionFailed, + hasServerSynced, + }; }; diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts index fb85fb8a12c..e0325151db4 100644 --- a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts +++ b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts @@ -1,4 +1,4 @@ -import { useEffect, useLayoutEffect, useMemo } from "react"; +import { useEffect, useLayoutEffect, useMemo, useState } from "react"; import { HocuspocusProvider } from "@hocuspocus/provider"; import Collaboration from "@tiptap/extension-collaboration"; import { IndexeddbPersistence } from "y-indexeddb"; @@ -20,6 +20,9 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit serverHandler, user, } = props; + // states + const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false); + const [hasServerSynced, setHasServerSynced] = useState(false); // initialize Hocuspocus provider const provider = useMemo( () => @@ -28,10 +31,18 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit name: id, token: user.id, parameters: realtimeConfig.queryParams, + onAuthenticationFailed: () => { + serverHandler?.onServerError?.(); + setHasServerConnectionFailed(true); + }, onConnect: () => serverHandler?.onConnect?.(), onClose: (data) => { - if (data.event.code === 1006) serverHandler?.onServerError?.(); + if (data.event.code === 1006) { + serverHandler?.onServerError?.(); + setHasServerConnectionFailed(true); + } }, + onSynced: () => setHasServerSynced(true), }), [id, realtimeConfig, user.id] ); @@ -65,5 +76,9 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit ], }); - return { editor, isIndexedDbSynced: true }; + return { + editor, + hasServerConnectionFailed, + hasServerSynced, + }; };