Bug in the Toast Component Section on the Docs Website

[sohamsshah]

Describe the bug

At https://react-bootstrap.github.io/components/toasts/ there is a dismissible toast section. That demonstrates two types of toast dismissals, with Animation and without Animation. In that, when toggled for with animation the toast disappears. But when again toggled, due to some reason the Toast Header Image disappears.

The Video demonstrating this:

To Reproduce

Steps to reproduce the behavior:

1. Go to https://react-bootstrap.github.io/components/toasts/
2. Scroll down to Dismissible Section
3. Click on Toggle Toast with Animation (also observe that the Placeholder Image in the Header is visible)
4. See the Toast will be disappeared
5. Again click the Toggle Toast with Animation button
6. See the image disappeared.

Expected behavior

The image must not disappear.

Observation

Initially the Image imports the SVG well. src= SVG and data-src = "holder.js/20x20?text=%20"
But when toggled, the data-src = none and src= "holder.js/20x20?text=%20"

While it should be same as before as essentially we are just altering show state.

Environment (please complete the following information)

• Operating System: Windows 10
• Browser, Version: Chrome 86

Additional context

I am very new as a contributor to React Bootstrap. Was developing my own React component library, so while searching for inspiration from Bootstrap, found this small bug.

Quite intrigued to learn and in contributing to Bootstrap Open Source! Would love to work on this issue, please assist me upon how to get started and will try to resolve this issue ASAP!

[kyletsang]

Have a look at the contributing docs

The local setup section in the readme should get you started with running a local copy of the docs site.

Thanks!

[sohamsshah]

Thanks! Working on it!

[sohamsshah]

Hi @kyletsang I suppose this issue is because of importing the image via src from holder.js. By testing with other images, it turns out that all of those works fine with animation and dismiss events.

I think a workaround for this will be to download the svg file for all placeholders, put it in asset and then import relatively from there. Though then it won't be ideal for an example with LIVE EDITOR.

Detailed explanation of what happens:
-> Dismissible Toast (with Animation) initially has: src="svg-image-loaded" and data-src="holder.js/20x20?text=%20"
After clicking on Toggle Toast Button, the Toast disappers.
Then when again clicked, the Toast appears again but now with src="holder.js/20x20?text=%20" and the data-src attribute goes away.

While this isn't the same with the other example where animation={false}.
Also this buggy behavior isn't seen when replacing the src with other image link or local svg file.

So, by this it is intuitive that the problem lies with holder.js and not in the API. Can be a quick fix once it is clear upon how it can be solved.

Let me know your views upon this on how to fix this.

[kyletsang]

Currently holderjs is initialized whenever the example codeblock is rendered, but not when there are any DOM changes in the example itself. The toast with animation is remounted when it is shown, but holderjs isn't run, so image doesn't appear properly. Interestingly, the toast is only unmounted when there is an animation.

Here's the relevant code for holderjs initialization:

react-bootstrap/www/src/components/ReactPlayground.js

Lines 116 to 125 in 00dffcd

	useIsomorphicEffect(() => {
	if (!hjs) {
	return;
	}
	hjs.run({
	theme: 'gray',
	images: qsa(exampleRef.current, 'img'),
	});
	}, [hjs, live.element]);

We could probably use a mutation observer here to watch for DOM changes?

[sohamsshah]

Thanks for taking time to help me resolve my doubt. This makes sense to me :)
Tho I haven't gotten to use Mutation Observer in React yet, but would love to explore. Is this Mutation Observer API you are referring to, or is there something else that is generally used in React? If you can provide some references/code examples (when you are free ofc), it can be helpful for me to resolve this issue :)

[kyletsang]

Yeah that’s the one. I haven’t used it myself yet, so can’t really give pointers, sorry.

[watinha]

Hey guys,

I verified that the Mutation Observer does fix this issue.

Can I send a PR for this?

[kyletsang]

Hey guys,

I verified that the Mutation Observer does fix this issue.

Can I send a PR for this?

Feel free to send a PR. useMutationObserver from @restart/hooks might help you here.

[watinha]

Just sent PR #5814, in regards to this issue.