[WEB-2502] chore: add a loader to the collaborative editor until it has synced with the live server

[aaryan610]

Summary by CodeRabbit

• New Features

  • Introduced a new loading interface for document editing and reading, enhancing user experience during loading times.
  • Added state management for server connection and synchronization status in collaborative editing components.

• Bug Fixes

  • Improved handling of server connection failures and synchronization, providing clearer feedback to users.

• Documentation

  • Updated exports to improve module usability by allowing direct imports from the loader module.

[coderabbitai]

Walkthrough

The changes introduce a new loading state for the CollaborativeDocumentEditor and CollaborativeDocumentReadOnlyEditor components, enhancing user feedback during document loading. The useCollaborativeEditor and useReadOnlyCollaborativeEditor hooks are updated to include states for server connection and synchronization status. A new component, DocumentContentLoader, is added to visually indicate loading states. Additionally, the index.ts file is modified to export the new loader module, improving the modularity of the codebase.

Changes

Files	Change Summary
packages/editor/src/core/components/editors/document/collaborative-editor.tsx	Introduced loading state in CollaborativeDocumentEditor, updated import for DocumentContentLoader, and modified control flow to check new states.
packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx	Enhanced CollaborativeDocumentReadOnlyEditor with loading state, updated import for DocumentContentLoader, and modified rendering logic based on server connection states.
packages/editor/src/core/components/editors/document/index.ts	Added export statement for DocumentContentLoader to improve module accessibility.
packages/editor/src/core/components/editors/document/loader.tsx	Introduced DocumentContentLoader component to provide a structured loading interface using Loader from @plane/ui.
packages/editor/src/core/hooks/use-collaborative-editor.ts	Added new state variables for server connection and sync status in useCollaborativeEditor, modified authentication failure handling, and updated return values.
packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts	Introduced new state variables for server connection and sync status in useReadOnlyCollaborativeEditor, modified error handling, and updated return values.

Possibly related PRs

• fix: character count to work properly on editor rerenders and read only mode #5554: Involves modifications to the useReadOnlyEditor and useEditor hooks, related to document information handling and state management, similar to changes in the current PR.

Suggested labels

✍️editor, pages

Suggested reviewers

• aaryan610
• SatishGandham
• Palanikannan1437

🐇 In the editor's cozy nook,
A loader now takes a look,
With states for sync and connection,
It brings a smoother direction.
Hooray for changes, bright and new,
A happy hop for all to view! 🌟

---

Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c8c9638 and 8527bf8.

Files selected for processing (6)

• packages/editor/src/core/components/editors/document/collaborative-editor.tsx (3 hunks)
• packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx (3 hunks)
• packages/editor/src/core/components/editors/document/index.ts (1 hunks)
• packages/editor/src/core/components/editors/document/loader.tsx (1 hunks)
• packages/editor/src/core/hooks/use-collaborative-editor.ts (4 hunks)
• packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts (4 hunks)

Additional comments not posted (18)

packages/editor/src/core/components/editors/document/index.ts (1)

3-3: LGTM!

The change is adding a new export statement for the loader module, which is consistent with the existing export statements in the file. This change enhances the module's interface by allowing consumers to import functionalities from the loader module directly via the index.ts file, thereby improving the modularity and usability of the codebase. The other existing exports remain unchanged, maintaining the current functionality of the collaborative and read-only editors.

packages/editor/src/core/components/editors/document/loader.tsx (1)

4-42: Excellent work on the DocumentContentLoader component!

The component is well-structured and follows a consistent design pattern. The use of the Loader component from the @plane/ui library and the arrangement of Loader.Item elements effectively simulate the expected content layout. The varying widths and heights of the loader items, along with the use of flexbox and spacing classes, create a responsive and visually appealing loader UI.

Some key highlights:

• The component is wrapped in a div with appropriate classes for sizing and padding.
• The loader items are grouped into sections to represent different content blocks like headings, paragraphs, and icons with text.
• The use of space-y-4 and space-y-2 classes provides consistent vertical spacing between the loader items.
• The relative class on the Loader component ensures proper positioning of the loader items.

Overall, the DocumentContentLoader component effectively enhances the user experience by providing a visually engaging loading state that mimics the expected content layout. Great job!

packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx (3)

3-3: LGTM!

The DocumentContentLoader component is correctly imported from @/components/editors to provide a loading state.

---

38-38: LGTM!

The useReadOnlyCollaborativeEditor hook now returns hasServerConnectionFailed and hasServerSynced properties to handle server connection states. This change aligns with the component's enhanced functionality to provide visual feedback during the loading state and handle connection failures.

---

55-56: LGTM!

The component now conditionally renders the DocumentContentLoader when the server has not synced and there has been no connection failure. This change improves the user experience by providing visual feedback during the loading state while maintaining the previous behavior of returning null if the editor instance is not available.

packages/editor/src/core/components/editors/document/collaborative-editor.tsx (3)

3-3: LGTM!

The import statement change looks good. It aligns with the PR objective of adding a loader for the collaborative editor.

---

45-45: LGTM!

The change to the useCollaborativeEditor hook's return value looks good. The additional states hasServerConnectionFailed and hasServerSynced will be useful for handling the loading and error states as per the PR objective.

---

70-71: Great work on implementing the loading state!

The conditional rendering logic for the DocumentContentLoader looks perfect. It directly addresses the PR objective by showing the loader when the server has not synced yet and there are no connection failures.

This change enhances the user experience by providing visual feedback during the loading process, ensuring that users are informed that the document is being prepared for editing. It fills the gap of not having a loading state previously.

packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts (5)

23-25: LGTM!

The new state variables are correctly initialized using the useState hook with appropriate initial values. The naming is clear and indicates their purpose.

---

34-37: LGTM!

The onAuthenticationFailed callback is correctly added to the provider configuration. It appropriately handles the authentication failure scenario by triggering the error handler and updating the hasServerConnectionFailed state.

---

40-43: LGTM!

The modification to the onClose callback is logically correct. It appropriately checks for the specific error code (1006) before triggering the error handler and updating the hasServerConnectionFailed state.

---

45-45: LGTM!

The onSynced callback is correctly added to the provider configuration. It appropriately updates the hasServerSynced state to true when the editor successfully syncs with the server.

---

79-83: LGTM!

The return statement of the hook is correctly updated to include the new state variables, hasServerConnectionFailed and hasServerSynced. This allows components that use this hook to access the server connection and sync status.

packages/editor/src/core/hooks/use-collaborative-editor.ts (5)

32-34: LGTM!

The new state variables are correctly initialized using the useState hook. The naming is clear and the initial values are appropriate.

---

44-47: LGTM!

The onAuthenticationFailed callback correctly updates the hasServerConnectionFailed state and invokes the onServerError callback to handle the error.

---

50-53: LGTM!

The onClose callback correctly updates the hasServerConnectionFailed state when the connection is closed with the specific event code and invokes the onServerError callback to handle the error.

---

55-55: LGTM!

The onSynced callback correctly updates the hasServerSynced state when the editor synchronizes with the server.

---

105-109: LGTM!

The return statement correctly includes the new state variables, allowing components that use this hook to access the server connection and synchronization status.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  -- I pushed a fix in commit <commit_id>, please review it.
  -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  -- @coderabbitai generate unit testing code for this file.
  -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  -- @coderabbitai read src/utils.ts and generate unit testing code.
  -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.