I'll attempt to give this answer a shot. I think you'll have to use a few things.

You'll likely want to use CSS transitions:

.suspenseComponent {
  opacity: 1;
  transition: opacity 1s;

.fade {
  opacity: 0;

So that if you later change that opacity on the element it will happen over a duration of 1 second.

Then you'll also need useRef (I think), so that you can keep track of that component and manually update the opacity.

import {useRef} from 'react'

const element = useRef(null)


<SuspenseComponent ref={element}/>



// essentially the same thing as document.getElementById('suspense').classList.add('fade')

Using the above you can get a reference to an element and you can add or remove classes to it, so you can add the fade class to it.

Lastly you can use:

import {useEffect} from 'react'

const Example = () => {
  useEffect(() => {
    // anything here will execute on component mount

    return () => {
      // anything you return here will execute on component unmount
  }, [])

I've not built it myself but I think you should be able to apply the opacity class on component mount so that it transitions in over 1s and then on the useEffect unmount if you remove the class it should transition out over 1s.

If it immediately reloads the component then perhaps you can also include:

setTimeout(() => {
  // delay whatever is refreshing the page
}, 1000)

If that might help.

Hopefully those ideas in combination help you get somewhere.

Related Query

More Query from same tag