Comments (7)
Hello, I am enthusiastic about tackling this issue. Given my experience in handling UI issues, I would appreciate it if you could assign this task to me.
from lexical.
Hello again,
After thorough investigation, I identified the cause behind the UI going blank when the user faces network issues or page loading problems. The main issue stems from the lazy loading of a crucial component, leading to the error message: Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/nodes/ImageComponent.tsx.
This error occurs because the component wasn't loaded initially, and when the network connection is lost, it triggers this error, resulting in a blank UI.
To tackle this issue, I made adjustments to the code by replacing the dynamic import statement with a synchronous import for the ImageComponent. This alteration ensures that the component is loaded at the beginning, resolving the error that arises when the network is disconnected. Consequently, even in offline scenarios, the UI remains functional, and the uploaded image is displayed successfully.
P.S.: After implementing these changes, the bundle size increased slightly from 8.8 MB to 8.9 MB.
from lexical.
I've identified a potential solution to the problem, but unfortunately, the Suspense
fallback doesn't seem to be functioning as expected. Despite implementing the suspense fallback in both the ImageComponent
and ImageNode
components within the node directory, the issue persists, and I'm having difficulty identifying their parent component.
Upon further investigation, it appears that the parent component should also implement the suspense library fallback. However, I'm struggling to locate the parent component that is utilizing the suspense library, or perhaps this is beyond my current understanding. If you notice and comprehend the issue, I would appreciate your assistance in resolving it.
from lexical.
I think the problem being described here is with the implementation of ImageComponent
and in particular the way LazyImage
works. useSuspenseImage
has no provision for when an image fails to load in a reasonable amount of time, it never resolves the promise. At the same time, it has a Suspense
with null
fallback, so it will not render until that promise resolves (which may never happen). The lowest effort workaround would be to race the promise with a timeout, which should let the component render and the browser can show a broken image.
function useSuspenseImage(src: string) {
if (!imageCache.has(src)) {
throw new Promise((resolve) => {
const img = new Image();
img.src = src;
img.onload = () => {
imageCache.add(src);
resolve(null);
};
// Resolve in 5 seconds if the image fails to load promptly
setTimeout(resolve, 5000, null);
});
}
}
from lexical.
Thank you for the suggestion. I tried the modification you provided, but unfortunately, the error persists. I've also checked for console error messages, but haven't found a resolution yet. Any further guidance or insights would be greatly appreciated.
from lexical.
I've been thinking about an alternative approach. What if we add a condition to the lazy load function so that when an error occurs, we load a placeholder image like 'error-img.png'? This way, we can visually indicate the error without hanging the promise indefinitely. What are your thoughts on this approach?
from lexical.
My mistake, the imageSet cache needs to be populated even if it fails otherwise it will simply retry
from lexical.
Related Issues (20)
- There is no className variable in the context of this docs copy-pasta
- Bug: failure to build with Webpack due to "Module not found: Error: Default condition should be last one" [regression] HOT 2
- Bug: Horizontal Rule node or Page break node selection problem
- Bug: ComponentPickerPlugin scrolling is buggy - dropdown disappears onScroll HOT 1
- Bug: CMD+Delete in a shadow root fails to delete the last paragraph
- Bug: Failed to upgrade Laxical from `0.13.1` to `0.14.x` (React) HOT 1
- Feature: Extend error boundary to all editor listeners
- Bug: Updating to version 0.14 esm error HOT 5
- Is this an AI generated library? HOT 3
- Bug: OnChangePlugin does not fire onChange while typing on Sticky note
- Bug: Numbered list does not increment in ImageNode caption
- Bug: caret jumping to the beginning after Node Transforms HOT 2
- Bug: Double input of text including composing, such as Japanese, at TextNode Boundaries with in a MarkNode HOT 1
- Feature: Use markdown plugin without bundling Prismjs HOT 1
- Bug: Delete all hangs for a long time on big documents. HOT 5
- Bug: AutoLink doesn't replace URLs containing multiple periods HOT 1
- Feature: Bundle on React pack with svgs HOT 1
- Bug: unable to save styles after importing html to editor HOT 1
- Bug: the minified version of ESM build of @lexical/text doesn't work with vite SSR HOT 4
- Bug: peerDependencies from monorepo packages cause npm resolution errors HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lexical.