React-spring: Delay when rendering the next component in useTransition

[GWSzeto]

🐛 Bug Report

I want to use useTransition for multi step forms. First off, the initial form does not translate properly into place and the value of the translate always seems to vary on each refresh. Also when transitioning between pages, the new form that is being presented is delayed before showing and it just pops up with no real animation

To Reproduce

https://codesandbox.io/embed/1y3yyqpq7q
I followed this tutorial closely in order to implement the transitions

Expected behavior

I expect the initial page to be placed correctly with a transform value of translate(0%) and for the new forms that are being transitioned into to be already present and not have to wait for it to load

Link to repro (highly encouraged)

https://codesandbox.io/s/dazzling-hill-1kl2o

Environment

• "react-spring": "^8.0.27",
• "react": "^16.8.6",

[aleclarson]

Have you tried with v9? npm install react-spring@next

[GWSzeto]

@aleclarson I just tried it with v9 and unfortunately it seems that it doesn't render properly still. I switched my implementation a little bit, which seems to have fixed the transform problem. This is what the current state of the code looks like right now:

const SignupContainer = () => {
  const [pageCount, setPageCount] = useState(0)
  const [userInfo, setUserInfo] = useState({})

  const goToPage = direction => setPageCount(pageCount + direction)

  const SignupProcess = [
    <InitialGreeting goToPage={goToPage}/>,
    <Typeform continueText={'Continue'} goToPage={goToPage}/>,
  ]

  const transitions = useTransition(pageCount, page => page, {
    from:  {  transform: 'translateX(100%)' },
    enter: {  transform: 'translateX(0)' },
    leave: {  transform: 'translateX(-100%)' },
  })

  return (
    <div>
      {transitions.map(({ item, props, key }) => (
        <animated.div style={props} key={key}>
          {SignupProcess[item]}
        </animated.div>
      ))}
    </div>
  )
}

here's a recording of how the bug looks like right now
https://www.loom.com/share/558e066b0cd34c1187597fb3fa60f363

[aleclarson]

I just looked at your sandbox, and there's no bug here. Here's a couple of tips:

• To avoid the 2nd page being pushed down by the 1st page, your pages should use position: absolute
• If your 2nd page is rendering too slow, you'll need to find a way to pre-render it. I don't know how hard this will be with useTransition (as I've never tried that)

You could try searching the Github issues (and/or the Spectrum community) for routing-related questions. Maybe you'll find some help. Anyway, I'll keep this open in case others have the same question.

[GWSzeto]

@aleclarson So I looked more into it and found out that it was rendering perfectly fine, but the new components that get transitioned in are pushed to the bottom as they transition in, then they pop back up once the transition finishes. So just as you mentioned, I set the pages to position absolute, which seems to have only fixed it after the first transition.

Also, there seems to be all this empty white space that appears to the bottom and to the right of the components as they transition and when the first page initially renders. Do you know why this might be the case?

Edit:
so it seems this is a problem whenever a transformation is done on mobile. Even in some of the examples shown in the react spring documentation, if you open up either site on mobile, the initial page that gets loaded has a lot of white space to the right and bottom of it.

https://1y3yyqpq7q.csb.app/
https://5yzw5x0wyl.csb.app/

After some more searching it seems people have tried to fix the problem by doing overflow: hidden
on body, root or some parent div that wraps the div with the transformation, but none of those have worked for me. The weirdest thing is that it's only on the initial page load up, once the first transition occurs, it works perfectly and the white space doesn't exist anymore. Any ideas as to why this might be?

[GWSzeto]

I ended up figuring out the solution to this problem. Setting the components to position: absolute was crucial and also for its parents to be position relative and overflow: hidden was also of the same importance.

After doing that, I was stuck getting a white screen only because I forgot to set the dimensions of the parent, making everything seem like it was being overflowed from the parents perspective.

Since this problem is fixed, I'm going to close this issue