[Card] Expandable Card mounts/un-mounts children

[killroy42]

Problem description

I'm using expandable cards to display asynchronous data. Load api on expand and populate list. Unfortunately a short list of just 30 items takes around 400ms+ to mount/render. This is ok, next to the time taken for the API cal (although I wish the rendering wouldn't freeze the progress spinner).

Unfortunately, closing and re-expanding the Card unmounts and re-mounts the child component, causing that 400ms freeze. Why is it not simply hidden with display: none or similar?

Steps to reproduce

Populate a Table with around 30 items inside an expandable card. Expand and collapse card and observe timings.

Versions

• Material-UI: 0.16.0-alpha
• React: 15.2.1
• Browser: Chrome 51.0.2704.106 m

[oliviertassinari]

Why is it not simply hidden with display: none or similar?

It's done this way to avoid paying 400ms+ upfront during the first render. I think that it's linked to #3289. I'm closing this issue as:

• The performance of the <List /> has been improved on the next branch.
• The <Card /> component is now composable. The previous expand logic is no implemented by the <Collapse /> component. You are free to use display: block/display: none if you find that solution better
• The fiber reconciliation engine is going to remove that freeze.

[VillainJoKeR]

The <Card /> component is now composable. The previous expand logic is no implemented by the <Collapse /> component. You are free to use display: block/display: none if you find that solution better

@oliviertassinari I didn't quite get this. How can I use display:block/display:none in a Card component? I am sorry but I did not understand. Please help! And I don't think I see a component named <Collapse />. I think I have misinterpreted your comment!

[mbrookes]

@VillainJoKeR

This example is using the Collapse transition. unMountOnExit is an optional prop.You can also use your own component there instead to show & hide the content.

[natrim]

i know its a bit old, but i was searching the solution and the links are no longer working
so there is what i put together, in case someone else is searching the solution

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Card, CardText, CardTitle } from 'material-ui';
import { CardExpandable } from 'material-ui/Card/index';

export class Boxed extends Component {
  static propTypes = {
    children: PropTypes.node.isRequired,
    title: PropTypes.string,
    containerStyle: PropTypes.object,
    expandable: PropTypes.bool,
    initiallyExpanded: PropTypes.bool,
    showExpandableButton: PropTypes.bool,
  };

  static defaultProps = {
    containerStyle: {},
    expandable: false,
    initiallyExpanded: false,
    showExpandableButton: true,
  };

  state = {
    expanded: null,
  };

  componentWillMount() {
    this.setState({
      expanded: this.props.initiallyExpanded === true,
    });
  }

  handleExpandClick = () => this.setState({ expanded: !this.state.expanded });

  render() {
    const { children, title, containerStyle, expandable, initiallyExpanded, showExpandableButton, ...props } = this.props;

    let content;
    if (Array.isArray(children)) {
      content = React.Children.map(
        children,
        (child) => React.cloneElement(child, props)
      );
    } else {
      content = React.cloneElement(children, props);
    }

    let expander;
    let contentStyle = {};
    if (expandable && !this.state.expanded) {
      contentStyle = { height: 0, overflow: 'hidden', padding: 0, margin: 0 };
    }
    if (title && expandable && showExpandableButton) {
      expander = <CardTitle onClick={this.handleExpandClick} style={{ cursor: 'pointer' }}>
        {title}
        <CardExpandable
          expanded={this.state.expanded}
          onExpanding={this.handleExpandClick}
        />
      </CardTitle>;
    } else if (title) {
      expander = <CardTitle>{title}</CardTitle>;
    } else {
      expander = '';
    }

    return (
      <Card containerStyle={containerStyle}>
        {expander}
        <CardText style={contentStyle}>
          {content}
        </CardText>
      </Card>
    );
  }
}