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.

Sign up for GitHub

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

Jump to bottom

Use Suspense for Image loading to reduce the cognitive overload in the code and also utilize the react18 concurrent rendering #632

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Use Suspense for Image loading to reduce the cognitive overload in the code and also utilize the react18 concurrent rendering #632

wants to merge 8 commits into from

Conversation

MTRNord
Copy link
Contributor

@MTRNord MTRNord commented Nov 13, 2024 •
edited
Loading

Related: NEO-1033

This makes use of a few new things:

This is very much an experiment and probably not perfect yet. However on my pc it feels like loading got snappier on image heavy boards like those with imported PDFs.

✔️ Checklist

  • A changeset describing the change and affected packages (more info).
  • Added or updated documentation.
  • Tests for new functionality and regression tests for bug fixes.
  • Screenshots or videos attached (for UI changes).
  • All your commits have a Signed-off-by line in the message (more info).

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Nov 13, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 6d79fb4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@MTRNord MTRNord force-pushed the marcel/ex/suspense_images branch 3 times, most recently from 03ac11f to 00f0450 Compare November 13, 2024 01:27
MTRNord
MTRNord commented Nov 13, 2024
View reviewed changes
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx
const [imageUri, setImageUri] = useState<undefined | string>();
const { data: imageUri } = useSWR(
{ widgetApi, baseUrl, mxc, mimeType },
downloadFile,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

We cant call downloadFile directly as we want values from props. It would rerender contantly. SWR glues this (and also gives us caching)

MTRNord
MTRNord commented Nov 13, 2024
View reviewed changes
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx
downloadFile();
}, [baseUrl, mimeType, mxc, widgetApi]);

const renderedSkeleton =
Copy link
Contributor Author

@MTRNord MTRNord Nov 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

The errors and skeleton are now handled one component above with error handling and suspense

@MTRNord MTRNord marked this pull request as ready for review November 18, 2024 16:24
@MTRNord MTRNord requested a review from a team as a code owner November 18, 2024 16:24
@MTRNord
Use Suspense for Image loading to reduce the cognitive overload in th…
f366907 
…e code and also utilize the react18 concurrent rendering

Signed-off-by: MTRNord <[email protected]>

Fix formatting

Signed-off-by: MTRNord <[email protected]>
@MTRNord
Move the image tests to the correct test to make it work with the new…
c252a52 
… suspense nesting

Signed-off-by: MTRNord <[email protected]>
@MTRNord
Prevent flash of reload due to invalidation happening when we dont ha…
37af562 
…ve a revalidation required in this case

Signed-off-by: MTRNord <[email protected]>
@MTRNord
Remove debug log
3db8ff3 
Signed-off-by: MTRNord <[email protected]>
@MTRNord MTRNord force-pushed the marcel/ex/suspense_images branch from 82e08ff to 3db8ff3 Compare November 19, 2024 10:10
weeman1337
weeman1337 requested changes Nov 26, 2024
View reviewed changes
Copy link
Contributor

@weeman1337 weeman1337 left a comment

Choose a reason for hiding this comment

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

I finally did a proper review. See my comments.

While caching improves when you navigate the slides (images do not show a loader any more) there is now another weird behaviour:

  • Upload an image
  • Keep the slide with the image open
  • Switch to another window (I did switch the workspace) for some minutes (not sure when exactly this happens)
  • Go back to the board
  • Image shows the loader and flickers for a short time

Tested in Firefox 132.0.2

packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Outdated Show resolved Hide resolved
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Outdated Show resolved Hide resolved
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Outdated Show resolved Hide resolved
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Show resolved Hide resolved
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Outdated Show resolved Hide resolved
packages/react-sdk/src/components/elements/image/ImageDisplay.tsx Outdated Show resolved Hide resolved
packages/react-sdk/src/components/Whiteboard/Element/ConnectedElement.tsx Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@weeman1337 weeman1337 weeman1337 requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@MTRNord @weeman1337