Mixing
react-infinite-scroll-component stopped working suddenly
2
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
reactjs
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
add a comment |
2
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
reactjs
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
add a comment |
2
2
2
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
reactjs
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
So, I am having a very unusual issue. I am using the package react-infinite-scroll-component and it worked perfectly before and suddenly stopped working. I have not imported anything new on the page and have stopped working now. I remember it worked perfectly.
These are the imports on the page:
```
import React, { Component } from 'react';
import { Col, Row, Icon, Spin, Radio, Tabs ,Button, Pagination } from 'antd';
import Select, { SelectOption } from '../../../shared/components/uielements/select';
import Box from '../../../shared/components/utility/box';
import LayoutWrapper from '../../../shared/components/utility/layoutWrapper.js';
import Form from '../../../shared/components/uielements/form';
import ActiveProductionClass from './active_production';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { productionByStatus } from '../../actions/edit_production_actions';
// import { Button } from 'antd/lib/radio';
import _ from "lodash";
import InfiniteScroll from 'react-infinite-scroll-component';
```
This is my package.json file:
```
"dependencies": {
"antd": "^3.0.3",
"antd-local-icon": "^0.1.3",
"axios": "^0.18.0",
"azure-storage": "^2.8.2",
"classnames": "^2.2.5",
"clone": "^2.1.1",
"cluster": "^0.7.7",
"dnd-core": "^6.0.0",
"dns": "^0.2.2",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.3",
"fs": "0.0.1-security",
"google-map-react": "^1.0.0",
"history": "^4.7.2",
"html-to-draftjs": "^1.3.0",
"image-to-base64": "^2.0.1",
"immutability-helper": "^2.6.6",
"jquery": "^3.3.1",
"jspdf": "git://github.com/MrRio/jsPDF.git#76edb3387cda3d5292e212765134b06150030364",
"lodash.flow": "^3.5.0",
"net-cluster": "0.0.2",
"nprogress": "^0.2.0",
"nuka-carousel": "^4.2.1",
"password-validator": "^4.0.0",
"phantom-html-to-pdf": "^0.5.6",
"postcss-inline-rtl": "^0.9.8",
"prop-types": "^15.6.1",
"query-string": "^5.1.1",
"react": "^16.3.1",
"react-audio-player": "^0.10.0",
"react-carousel-slider": "^2.0.11",
"react-cookies": "^0.1.0",
"react-cropper": "^1.0.1",
"react-customizable-carousel": "0.0.7",
"react-detect-offline": "^2.1.1",
"react-dnd": "^2.6.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dock": "^0.2.4",
"react-dom": "^16.3.1",
"react-draft-wysiwyg": "^1.12.12",
"react-drag-and-drop": "^2.4.0",
"react-grid-gallery": "^0.4.11",
"react-image-crop": "^3.0.11",
"react-infinite-scroll-component": "^4.1.0",
"react-intl": "^2.3.0",
"react-loading-components": "^1.1.12",
"react-modal-video": "^1.1.2",
"react-pdf": "^3.0.5",
"react-placeholder": "^2.0.0",
"react-quill": "^1.2.7",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.0",
"react-router-navigation-prompt": "^1.8.0",
"react-router-redux": "^5.0.0-alpha.5",
"react-scripts": "1.0.17",
"react-sidebar": "^2.3.2",
"react-sliding-pane": "^2.0.2",
"react-smooth-scrollbar": "^8.0.6",
"react-soundplayer": "^1.0.4",
"react-textarea-count": "^1.0.3",
"react-throttle": "^0.3.0",
"react-truncate": "^2.3.0",
"react-window-size-listener": "^1.0.10",
"redux": "^3.6.0",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.2.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.16.0",
"redux-thunk": "^2.2.0",
"repl": "^0.1.3",
"reqwest": "^2.0.5",
"simple-react-validator": "0.0.7",
"smooth-scrollbar": "^8.2.5",
"styled-components": "^2.2.1",
"styled-theme": "^0.3.3",
"video-react": "^0.10.4",
"yargs": "^11.0.0"
},
"devDependencies": {
"react-alice-carousel": "^1.10.1",
"react-app-rewired": "^1.4.0"
},
```
I am rendring it like this:
```
return (
<InfiniteScroll
dataLength={this.state.activeProduction_data.length} //This is important field to render the next data
next={this.loadMore}
hasMore={true}
loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large">
<LayoutWrapper>
<Box>
<Form>
<Row style={rowStyle} gutter={gutter} justify="start">
<Col md={24} sm={24} xs={24} >
<Tabs defaultActiveKey={this.state.defaultKey} onChange={this.typeChange} tabBarExtraContent={operations}>
<TabPane tab="LIVE" key="1"></TabPane>
<TabPane tab="DRAFT" key="2"></TabPane>
<TabPane tab="ARCHIVED" key="3"></TabPane>
</Tabs>
</Col>
</Row>
<Row style={rowStyle} gutter={gutter} justify="start">
{this.state.activeProduction_data.length > 0 ?
<ActiveProductionClass onArchiveClick={this.onArchiveClick} /* onCardClick={this.onCardClick} */ activeProductionData={this.state.activeProduction_data} />
: <div style={{ textAlign: "center", width: "100%" }}>{this.state.selected_type == 1 ? 'No Live Productions.' : ''}{this.state.selected_type == 2 ? 'No Draft Productions.' : ''}{this.state.selected_type == 3 ? 'No Archived Productions.' : ''}</div>}
</Row>
</Form>
</Box>
</LayoutWrapper>
</Spin>
</InfiniteScroll>
);
```
I have removed everything from the page and tried the one you gave in the example and I checked that nothing was still working. Does anyone have any idea which of the package is hindering with the performance?
I tried a little troubleshooting and checked that the package works but the loadmore function is not being called. I say this because the property loader={<Spin spinning={this.state.loading} tip="Loading..." indicator={antIcon} delay={500} size="large"></Spin>} in Infinitescroller works as i can see the spin on page. But when i scroll down on the page the loadmore function should call which is not getting called now and was working fine before.
Please help me guys! thanks!!!
reactjs
reactjs
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
asked Nov 20 '18 at 6:45
Nagesh KatnaNagesh Katna
417516
417516
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387607%2freact-infinite-scroll-component-stopped-working-suddenly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53387607%2freact-infinite-scroll-component-stopped-working-suddenly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
