Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(suggestion): add isLoading state to suggestion popup #5542

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

regexyl
Copy link

@regexyl regexyl commented Aug 23, 2024

Changes Overview

Fixes issue #5533 by exposing an isLoading prop for the suggestion popup.

Implementation Approach

Not sure if this is the way to go, took the least resistant path. This re-renders the popup after resolving the items promise with the updated result.

Testing Done

Here's a recording, though I'm not sure how it should be presented on the demo example.
https://www.loom.com/share/11fb168e6f0e4e6eb2853472b4f90842

Verification Steps

As described in the video above.

Additional Notes

Checklist

  • I have created a changeset for this PR if necessary.
  • My changes do not break the library.
  • I have added tests where applicable.
  • I have followed the project guidelines.
  • I have fixed any lint issues.

Related Issues

Copy link

changeset-bot bot commented Aug 23, 2024

🦋 Changeset detected

Latest commit: 2742b77

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages
Name Type
@tiptap/suggestion Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-character-count Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-cursor Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-document Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-focus Patch
@tiptap/extension-font-family Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-history Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-italic Patch
@tiptap/extension-link Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-mention Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-table Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-youtube Patch
@tiptap/html Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Aug 23, 2024

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 2742b77
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/66c833ce23947800083a7195
😎 Deploy Preview https://deploy-preview-5542--tiptap-embed.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Comment on lines +256 to +263
props.isLoading = true
Promise.resolve(items({ editor, query: state.query })).then(result => {
if (props == null) {
return
}
props.isLoading = false
props.items = result
renderer?.onUpdate?.(props)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is doing more than just exposing the loading state, it should still be awaited, you are changing the behavior of how this works.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see apologies - this is kind of a naive question, why does it need to be awaited?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By awaiting the function, you are suspending it's execution of the lines after it. If the goal truly is to only expose an isLoading flag, then you should not be messing with the order of execution. By doing a Promise.resolve & not awaiting it, you are immediately executing the next lines synchronously.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense! Though wouldn't having await defeat the purpose of having an up-to-date isLoading value if the component is only going to be re-rendered after the promise returns?

I imagined it like this:

  • update isLoading -> rerender (i.e. immediately executing next lines)
  • when promise is resolved -> update isLoading -> rerender

and re: messing up the next lines: maybe something like this might work?

Might be missing a bit of context and need a bit of hand-holding here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Backlog
Development

Successfully merging this pull request may close these issues.

2 participants