When unmounting component with ContentLoader a LOOP Warning is thown

[beickon]

Im using ContentLoader inside a LoadingListItem Component. When a flag is changed I unmount this component to ListItem BUT when this happens a WARNING is thrown , this warning is consuming the memory.

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the ContentLoader component.

[danilowoz]

Thanks @beickon I will see!

[danilowoz]

@beickon I did a test that mounts and unmount the component and I didn't have any error, see my code:

import React, { Component } from 'react';
import ContentLoader from 'react-content-loader'

class App extends Component  {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    }

    this.hit = this.hit.bind(this)
  }

  hit() {
    this.setState({
      show: !this.state.show
    })
  }

  render() {
    return(
      <div className="container">
        <button onClick={this.hit}>Hit</button>
        {this.state.show && <ContentLoader style={{marginBottom: 20}} /> }
      </div>
      )
  }
}

export default App

Does your code look like this? Can you paste yours here?
I will be happy to help you :)

[beickon]

At the end what I did was to "remove" the complete View or make a transition from my LoadingView to the MainView

But what I use to have was something like this:

render() {
  return (
   <View>
     <Navbar />
   { (loading ? <Loading /> : <List /> ) }
  </View>
);
}

Where loading is a state var managed by Reduce. By default loading is === true it will change as soon as Firebase fetch all the needed information so ListView can render correctly.

Loading component has the ContentLoader inside, and List has a normal list.

Hope this helps :D

[vvavepacket]

@beickon i also have the same code structure as yours before.. i rely on a state var managed by Reduce. How exactly do you remove the complete view and make a transition?

[danilowoz]

@vvavepacket Are you having the same problem?

@beickon Sorry for the long delay, is it happing yet?
Could you please paste a part of the code that we can test?

[vvavepacket]

Yes I have same problem, i solve it by editing the animation component inside, there was a loop, so i have to stop it. Can anyone help me how to contribute back to the code?

[danilowoz]

@vvavepacket if you have the solution, please open a PR with your changes.
To do this, you need to fork the project and run some commands:

• to setup yarn
• to dev yarn dev
• to see the changes yarn storybook

Or paste the changes here then open a PR and assign to you, what do you think?

[danilowoz]

@vvavepacket Do you need help with this task?
I think this problem is happening to more people then I need to fix it asap

[vvavepacket]

Hi Danilo, pls proceed with ur fix, currently away from my computer. Thank you.

…

On Nov 24, 2017 07:40, "Danilo Woznica" ***@***.***> wrote: @vvavepacket <https://github.com/vvavepacket> Do you need help with this task? I think this problem is happening with more people then I need to fix it asap — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH6U2gcq0crifyXiLQJAQve2t7g7u7_1ks5s5rlSgaJpZM4PKre1> .

[danilowoz]

@vvavepacket Are you speaking about the animation of SVG?
Did you stop this and it works? https://github.com/danilowoz/react-content-loader/blob/master/src/Wrap.js#L37

[vvavepacket]

Yes I stop the animation.

Also any idea what happen to react-native-content-loader? I think that was the module I am using since I don't use expo.

[danilowoz]

@vvavepacket if I set up a config that stops the animation, will it help you?
Like <ContentLoader animation={false} />

So the react-native-content-loader isn't mine, but I would like to fork it and improve the code, are you using it now? Would you like help me too?

[vvavepacket]

Absolutely yes, I would love to give back to the community. Unfortunately I could no longer find the project on github.

…

On Fri, Dec 22, 2017 at 7:38 AM, Danilo Woznica ***@***.***> wrote: @vvavepacket <https://github.com/vvavepacket> if I set up a config that stops the animation, will it help you? Like <ContentLoader animation={false} /> So the react-native-content-loader isn't mine, but I would like to fork it and improve the code, are you using it now? Would you like help me too? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AH6U2hMIWJ0_czAgUQGH9nqVkOTVpS69ks5tC6LXgaJpZM4PKre1> .