Ticker vanishes after a while when leaving tab and coming back

[samesamestudio]

Hi there! Thank you for this ticker, I really love it.

However, I'm encountering the following problem: When I have the page open, and just go to another tab and back to the page again after a few seconds, the ticker starts vanishing, almost as if the infinite loop and the ticker ends. So the ticker is gone and only reappears if I refresh the page. I've tried adding more elements to the Ticker array, but the problem remains the same. It works just fine when I'm staying on the page.

This is what it looks like, while I'm on the page:

This is what happens after I leave the page (without closing it) and come back after a few seconds:

I've directly added the ticker in my functional component with other elements.

const SliderTextTop = ({
  text, images, buttonText, buttonLink,
}) => (
  <Wrapper>
...
    <TickerWrapper>
      <Ticker>
        {({ index }) => (
          <div>
            <h1>Some Ticker Text</h1>
          </div>
        )}
      </Ticker>
    </TickerWrapper>
   .....
  </Wrapper>
); 

Any idea what the problem could be? Thank you in advance!

[sam1siam]

You can use page visibility as mentioned https://www.npmjs.com/package/react-page-visibility

[goranurukalo]

Hey, after playing around a bit i figure out how to make ticker stay as it is after your tab is inactive for while

the trick is that browsers freeze requestAnimationFrames and slows down setTimeout-s or setIntervals

so to make this work we need to change source code the trick is in Element.js - when move prop gets truned off we need to cancel animation

window.cancelAnimationFrame(this.raf);

where this.raf is set in animation method this.raf = this.requestAnimationFrame(step); in two places

I will create pull request later today (unless somebody wanna implement until then) This fixed issues for me when i set move to false after page/tab becomes inactive

[sam1siam]

Can you share your code here, it looks like the pull request is still open! @goranurukalo

[goranurukalo]

@isamersiam Hey, i wasn't able to make better example then this

https://codesandbox.io/s/react-ticker-visibility-test-vmyfi

So, i tried to use ticker via github as dependency but i failed in short time (sryyy) This is basically my pull request in react-ticker folder with 3 changes

So locally u might be able to use it like i tried (check package.json and dependencies) its much better then copy paste like i did here

I hope it helps 🤗

[razvanmitre]

The only fix I've found for this is remove the ticker entirely from the page when usePageVisibility() is false

[beamercola]

I'm having same issue - changing tabs and back it disappears. Here's my little component:

import { useState } from "react"
import { default as ReactTicker } from "react-ticker"
import PageVisibility from "react-page-visibility"

const Ticker = ({ className, children, ...props }) => {
  const [pageIsVisible, setPageIsVisible] = useState(true)

  const handleVisibilityChange = ({ isVisible }) => {
    setPageIsVisible(isVisible)
  }

  return (
    <PageVisibility onChange={handleVisibilityChange}>
      <div className={className}>
        {pageIsVisible && (
          <ReactTicker {...props}>{() => <>{children}</>}</ReactTicker>
        )}
      </div>
    </PageVisibility>
  )
}

export default Ticker