React-virtualized: [HELP] loop & flicker

[iTonyYo]

[email protected]

Loop && flicker all the time. Check this(gif). Not using flexbox container.

this._cache = new CellMeasurerCache({
  fixedWidth: true // Rendered cells will have a fixed width, dynamic height
});

if I changefixedWidth to false, the problem will be solved, but it will not remove the hidden nodes.

The code,

'use strict';

import React, { PureComponent } from 'react';
import Radium from 'radium';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import { isEmpty, isEqual } from 'lodash';
import store from 'store';
import {
  List,
  AutoSizer,
  CellMeasurer,
  CellMeasurerCache,
  ScrollSync
} from 'react-virtualized';

import {
  Pages,
  Page,
  OffCanvas
} from '../../component/Layout';

import { MainTopbar } from '../../component/Topbar';
import Toolbar from '../../component/Toolbar/toolbar.js';
import Tab from '../../component/Tab/Tab.js';
import Pane from '../../component/Tab/pane.js';
import Card from '../../component/Card/Card.js';
import CardLoader from '../../component/Card/CardLoader.js';

import './index.css';

let propTypes = {
  pathname: PropTypes.string,
  fetchDataIfNeeded: PropTypes.func,
  isFetching: PropTypes.bool,
  data: PropTypes.instanceOf(Immutable.List),
  lastUpdated: PropTypes.number
};

let userInfo = store.get('user');

@Radium
class ViewMine extends PureComponent {
  constructor(props) {
    super(props);

    this._renderLoader = this._renderLoader.bind(this);
    this._renderNoData = this._renderNoData.bind(this);
    this._renderInfiniteList = this._renderInfiniteList.bind(this);
    this._rowRenderer = this._rowRenderer.bind(this);

    this._cache = new CellMeasurerCache({
      fixedWidth: false
    });
  }

  _getDatum (data, index) {
    return data.get(index % data.size);
  }

  _renderLoader() {
    return (
      <div>
        <CardLoader></CardLoader>
        <CardLoader></CardLoader>
      </div>
    );
  }

  _renderNoData() {
    return (
      <div className='border-box xy-center no-data'>
        ...
      </div>
    );
  }

  _rowRenderer({ index, isScrolling, key, parent, style }) {
    let {
      data,
    } = this.props;

    let rowData = this._getDatum(data, index);

    return (
      <CellMeasurer
        cache={ this._cache }
        columnIndex={ 0 }
        key={ key }
        parent={ parent }
        rowIndex={ index }>
        {({ measure }) => (

          <div className='virtualized-box'>
            <div className='border-box virtualized-box-inner'>
              <Card
                pathname={ this.props.pathname }
                avatar={ userInfo.avatar }
                title={ rowData.get('title') }
                username={ userInfo.username }
                description={ rowData.get('description') }
                favourites={ rowData.get('favourites') }
                lastUpdate={ rowData.get('lastUpdate') }
                representation={ '' }/>
            </div>
          </div>

        )}
      </CellMeasurer>
    );
  }

  // TODO, InfiniteLoader.
  _renderInfiniteList() {
    let {
      data,
    } = this.props;

    return (
      <AutoSizer>
        {({ width, height }) => (
          <List
            deferredMeasurementCache={ this._cache }
            height={ height }
            rowCount={ data.size }
            rowHeight={ this._cache.rowHeight }
            rowRenderer={ this._rowRenderer }
            width={ width }
          />
        )}
      </AutoSizer>
    );
  }

  componentDidMount() {
    let {
      fetchDataIfNeeded
    } = this.props;

    fetchDataIfNeeded();
  }

  render() {
    let {
      isFetching,
      data,
      lastUpdated
    } = this.props;

    return (
      <OffCanvas
        title={ 'Mine' }
        className='offcanvas-mine'>
        <MainTopbar />

        <Pages>
          <Page>
            <Tab selected={ 0 } className='page-mine'>
              <Pane label='Tab-1' className='tab-collective'>
                {
                  isFetching ?
                    this._renderLoader() :
                    isEqual(data.size, 0) ?
                        this._renderNoData() :
                          this._renderInfiniteList()
                }
              </Pane>
              <Pane label='Tab-2' className='tab-tribe'></Pane>
              <Pane label='Tab-3' className='tab-power'></Pane>
            </Tab>
          </Page>
        </Pages>

        <Toolbar/>
      </OffCanvas>
    );
  }
}

ViewMine.propTypes = propTypes;

export default ViewMine;

[iTonyYo]

Solved!

[ghost]

it should be main example code ...