Redux-persist: PersistGate: animate loading component

[wachunei]

Hi, is there a way I can animate loading component, I know I can start an animation on life cycle events such as componentDidMount, but is there a way I can set up any other transition? or wait for it to be finished before lifting the gate?

Thanks!

[freshcoat]

Did you find yourself already a solution to this ? I am searching for something similar. I did an application fade in on reHydrated = true in v4 but searching for something similar with v5 persistGate.

[wachunei]

@klasver I did exactly the same, in that case it seems like the best alternative is to not use PersistGate and render a component that renders a splash screen before hydration (checking state._persist.rehydrated) and then animate and render main navigation component. Have not tried to implement that yet though.

[freshcoat]

@wachunei Thanks, did the same trick, works great! 👍

[rt2zz]

right if you want to animate loading away that is probably going to require some custom connections (ala https://github.com/rt2zz/redux-persist/issues/655#issuecomment-357700158). Anything that was possible in v4 is certainly achievable in v5 - PersistGate is just a convenience.

I dont want to make PersistGate more complex but its possible we could do one of the following:

1. create a new module PersistGateAnimated or something like that
2. expose an alternate api where instead of having a loading prop, it uses function children a la:

<PersistGate persistor={persistor}>
  {(bootstrapped) => {
    // return fancy animation components here based on the value of bootstrapped
  }}
</PersistGate>

Open to suggestions, but it seems like 2 could be a good option that mirrors how react-router works.

[wachunei]

I kinda like the idea of option 2, but in that case, where the main components of the app go? I think is a little bit confusing.

In the same direction, we could achieve something like loading but with a render prop.

  <Provider store={store}>
    <PersistGate
      persistor={persistor}
      loading={({ hydrated, liftGate, ...otherProps }) => <MyAnimatedComponent hydrated={...} liftGate={...} />}
    >
      <MyAppGoesHere />
    </PersistGate>
  </Provider>

I this case MyAnimatedComponent can start an animation on hydration and lift gate as it ends.

PS: I really have no deep understanding of how possible to do is this, but I can dive in if this goes through

[rt2zz]

@wachunei well again taking the react router analogy option 2 would work like this:

<PersistGate persistor={persistor}>
  {(bootstrapped) => {
     return [
        <AnimatedLoader visible={!bootstrapped} />,
        bootstrapped && <MyAppGoesHere />
     ]
  }}
</PersistGate>

i.e. it puts the responsibility for rendering the loader and main app into the hands of the implementor, but the common pattern would be basically bootstrapped && <MyAppGoesHere />

The approach you describe here: https://github.com/rt2zz/redux-persist/issues/655#issuecomment-362416964 is problematic to me because a) it does not solve as many use cases and b) it overloads the meaning of loading prop which may confuse users.

If I can elaborate on (a) consider this use case where you want to initialize a component to get some heavy lifting done immediately but still need to know when boostrap is complete to do additional work:

<PersistGate persistor={persistor}>
  {(bootstrapped) => {
    return <MyAppGoesHere bootstrapped={bootstrapped} />
  }}
</PersistGate>

Of course this is all somewhat straight forward to replicate using a custom component which listens to the persistor, but I like that this pattern preserves the onBeforeLift pattern.

[wachunei]

I get it now, I'd like to contribute on this

[wachunei]

@rt2zz I'm sorry to bother with this question, but I was going to begin working on this when I ran into Metro Bundler does not support symlinks inside ./node_modules (I was using yarn link to link my local branch of redux-persist to a RN test app).

So I've decided to move on to a create-react-app app. After linking the package I realized it has an entry point that only works after build (lib), but I started working on src files. What's your development setup? Am I doing something wrong or missing something in order to grab modules from src instead of built files?

Thanks!

[rt2zz]

@wachunei there are a few ways to do it. In my case with react native I always do one of the following (depending on the scale of changes):

1. in your app import from src (e.g. import { persistStore } from 'redux-persisit/src') then edit the files in place and when you are done you copy the files back into your local git repo.
2. use wml for create a "hardlink" alternative to yarn link.

Both options are a bit tedious :/

Or if you use create-react-app then yarn link should work but you need to be sure to build after every change. i.e. literally run yarn build. You can run the build in watch mode for convenience: yarn build:es --watch but be sure to run the right build for your environment (i.e. es vs lib)

Now that I write this out I realize how frustratingly complex it is!

[wachunei]

I will try with those options, thanks!

Would it work to have an entry point that imports from src or lib depending on dev environment variable?

On Feb 4, 2018, 2:35 PM -0300, Zack Story [e-mail], wrote:

@wachunei there are a few ways to do it. In my case with react native I always do one of the following (depending on the scale of changes):

1. in your app import from src (e.g. import { persistStore } from 'redux-persisit/src') then edit the files in place and when you are done you copy the files back into your local git repo.
2. use wml for create a "hardlink" alternative to yarn link.

Both options are a bit tedious :/
Or if you use create-react-app then yarn link should work but you need to be sure to build after every change. i.e. literally run yarn build. You can run the build in watch mode for convenience: yarn build:es --watch but be sure to run the right build for your environment (i.e. es vs lib)
Now that I write this out I realize how frustratingly complex it is!
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[rt2zz]

Would it work to have an entry point that imports from src or lib depending on dev environment variable?

I am not sure how that would work - but open to suggestion. We use package.json module field to opt es users into the es build: https://github.com/rt2zz/redux-persist/blob/master/package.json#L6

[wachunei]

I spent last few hours trying to make this work, this is what I got:

The code for the end user would be basically changing this

<Provider store={store}>
  <PersistGate loading={ /* loading component */ } persistor={persistor}>
    <App />
  </PersistGate>
</Provider>

to

<Provider store={store}>
  <PersistGate persistor={persistor}>
    {bootstraped => (
      // custom component 
    )}
  </PersistGate>
</Provider>

in the previous gif case it was:

<Provider store={store}>
  <PersistGate persistor={persistor}>
    {bootstraped => (
      <AnimatedGate bootstraped={bootstraped}>
        <App />
      </AnimatedGate>
    )}
  </PersistGate>
</Provider>

On the source the changes are 5 lines in PersistGate component, what do you think?
https://github.com/wachunei/redux-persist/commit/608c4ea46ce6bf06fc7a88c9cc18a6046746c286

[rt2zz]

awesome, that looks perfect - mind opening a PR?

[isurugajasinghe]

@wachunei I used your code animatedgate.js but Image do not transparent(background color visible as light blue color). why is that ?