how to stop InView in react-intersection-observer

775 Views Asked by At

I use inView in my component. Until the posts were loaded, the user see the skeleton. But when I press delete button, the skeleton appears and dissappers. Can I stop this quick appearance when press the delete button.

class MyPosts extends Component {
  deleteItem = (key) => {
    this.props.deleteItem(key);
  };

  render() {
    const { myPosts, classes } = this.props;

    let posts = myPosts.map((item) => {
      return (
        <InView threshold={0}>
          {({ ref, inView }) => (
            <div  ref={ref} inView={inView}>
              {inView ? (
                <Card>                  
                  <Typography >
                    {item.post}
                  </Typography>                 
                  <Button                   
                   onClick={() => this.deleteItem(item.key)}
                  >
                    Done
                  </Button>
                </Card>
              ) : (
                <Skeleton />
              )}
            </div>
          )}
        </InView>
      );
    });

    return <div>{posts}</div>;
  }
}
0

There are 0 best solutions below