diff --git a/.changeset/fix-imageblock-cached-image-race.md b/.changeset/fix-imageblock-cached-image-race.md new file mode 100644 index 0000000000000..afe5fc30192e5 --- /dev/null +++ b/.changeset/fix-imageblock-cached-image-race.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/fuselage-ui-kit': patch +--- + +Fix race condition in ImageBlock where cached images could trigger load event before event listener was attached, causing images to never render properly in UIKit blocks. \ No newline at end of file diff --git a/.yarnrc.yml b/.yarnrc.yml index fd84577753a88..6e7da4264c150 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -8,8 +8,9 @@ enableImmutableInstalls: false nodeLinker: node-modules -plugins: - - path: .yarn/plugins/@yarnpkg/plugin-engines.cjs - spec: "https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js" +# Temporarily disabled engines plugin for development +# plugins: +# - path: .yarn/plugins/@yarnpkg/plugin-engines.cjs +# spec: "https://raw.githubusercontent.com/devoto13/yarn-plugin-engines/main/bundles/%40yarnpkg/plugin-engines.js" -yarnPath: .yarn/releases/yarn-4.12.0.cjs +yarnPath: .yarn/releases/yarn-4.12.0.cjs \ No newline at end of file diff --git a/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx b/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx index 3bd88eecf582f..08bfe022ddd01 100644 --- a/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx +++ b/packages/fuselage-ui-kit/src/blocks/ImageBlock.tsx @@ -45,18 +45,20 @@ const ImageBlock = ({ className, block, surfaceRenderer }: ImageBlockProps): Rea useEffect(() => { const img = document.createElement('img'); + img.src = block.imageUrl; + + // If image is already cached and loaded, update state immediately + if (img.complete) { + setState(fetchImageState(img)); + return; + } + // Otherwise, wait for the load event const handleLoad = () => { setState(fetchImageState(img)); }; img.addEventListener('load', handleLoad); - img.src = block.imageUrl; - - if (img.complete) { - img.removeEventListener('load', handleLoad); - setState(fetchImageState(img)); - } return () => { img.removeEventListener('load', handleLoad); diff --git a/packages/livechat/webpack.config.ts b/packages/livechat/webpack.config.ts index f7a728d816654..ace46266a62b4 100644 --- a/packages/livechat/webpack.config.ts +++ b/packages/livechat/webpack.config.ts @@ -134,6 +134,7 @@ const config = (_env: any, args: webpack.WebpackOptionsNormalized): webpack.Conf 'process.env.NODE_ENV': JSON.stringify(args.mode === 'production' ? 'production' : 'development'), }), new HtmlWebpackPlugin({ + template: _('./src/index.ejs'), title: 'Livechat - Rocket.Chat', chunks: ['polyfills', 'vendor', 'bundle'], chunksSortMode: 'manual',