Twitter时间轴样式的闪光

Question

如何解决Twitter嵌入样式的闪烁问题？ 空白的白色来自我的setimeout，但是还有第二个内容被加载，然后似乎逐渐地设置样式。看起来很乱，如何避免加载时出现这种情况？

const handle = 'steveaustinBSR';

const StyledCard = styled(Card)`
  margin: 15px 0 15px 40px;
  padding: 31px 29px 29px 27px;
  height: 440px;

  & #twitter-timeline {
    width: 100%;
  }
`;

class TwitterBlock extends Component {
  state = {
    loaded: false,
  };

  componentDidMount() {
    const setLoaded = () => setTimeout(() => this.setState({ loaded: true }), 1000);

    scriptjs('https://platform.twitter.com/widgets.js', () => {
      const twttr = window.twttr;

      twttr.ready(() => {
        twttr.events.bind('loaded', function(event) {
          console.log('eevent', event);
          setLoaded();
        });

        twttr.widgets
          .createTimeline(
            {
              sourceType: 'profile',
              screenName: handle,
            },
            document.getElementById('twitter-timeline'),
            {
              chrome: 'nofooter',
              height: 390,
            },
          )
          .then(() => twttr.widgets.load());
      });
    });
  }

  render() {
    return (
      <StyledCard>
        <Div id="twitter-timeline" display={!this.state.loaded ? 'none' : 'block'} />
      </StyledCard>
    );
  }
}