IT技术 - 在获取数据时显示 CSS 加载指示器 - 吾爱随笔录

我有一个不确定的线性 css 加载指示器，就像材料设计中的那样。每次我从 Redux 的 reducer 获取数据时，我都会显示这个指标。问题是，当指标出现时，它并没有被动画化。看起来整个页面都冻结了，直到 reducer 填充了数据。

假设我的加载指示器始终可见并具有动画效果。一旦我将数据获取/请求到减速器中，加载指示器就会停止动画。

您认为这是什么原因造成的？它是可修复的还是我需要实现一个 gif 指示器而不是一个 css 指示器？

编辑 1

这是我的Loader组件：

import React, { Component, PropTypes } from 'react';
import radium from 'radium';

// indeterminate Linear (type: indeterminateLinear)
const indeterminateLinearLong = radium.keyframes({
  '0%': {
    left: '-35%',
    right: '100%'
  },
  '60%': {
    left: '100%',
    right: '-90%'
  },
  '100%': {
    left: '100%',
    right: '-90%'
  }
});
const indeterminateLinearShort = radium.keyframes({
  '0%': {
    left: '-200%',
    right: '100%'
  },
  '60%': {
    left: '107%',
    right: '-8%'
  },
  '100%': {
    left: '107%',
    right: '-8%'
  }
});
const indeterminateLinear = {
  base: {
    backgroundColor: '#26a69a',
  },
  progress: {
    position: 'relative',
    height: '4px',
    display: 'block',
    width: '100%',
    backgroundColor: '#acece6',
    // borderRadius: '2px',
    backgroundClip: 'padding-box',
    // margin: '0.5rem 0 1rem 0',
    overflow: 'hidden',
    zIndex: '999'
  },
  before: {
    position: 'absolute',
    backgroundColor: 'yellow',
    top: '0',
    left: '0',
    bottom: '0',
    willChange: 'left, right',
    animation: 'indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite',
    animationName: indeterminateLinearLong
  },
  after: {
    position: 'absolute',
    backgroundColor: 'yellow',
    top: '0',
    left: '0',
    bottom: '0',
    willChange: 'left, right',
    animation: 'indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite',
    animationName: indeterminateLinearShort,
    animationDelay: '1.15s'
  }
};

// Indeterminate Cirular (type: indeterminateCircular (default))
const indeterminateCircularRotate = radium.keyframes({
  '100%': {
    transform: 'rotate(360deg)'
  },
});
const indeterminateCircularColor = radium.keyframes({
  '100%, 0%': {
    stroke: 'red'
  },
  '40%': {
    stroke: 'blue'
  },
  '60%': {
    stroke: 'green'
  },
  '80%, 90%': {
    stroke: 'yellow'
  }
});
const indeterminateCircularDash = radium.keyframes({
  '0%': {
    strokeDasharray: '1,200',
    strokeDashoffset: '0'
  },
  '50%': {
    strokeDasharray: '89,200',
    strokeDashoffset: '-35'
  },
  '100%': {
    strokeDasharray: '89,200',
    strokeDashoffset: '-124'
  },
});
const indeterminateCircular = {
  loader: {
    position: 'absolute',
    width: '100px',
    height: '100px',
    left: '50%',
    top: '20%'
  },
  circular: {
    animation: 'x 2s linear infinite',
    animationName: indeterminateCircularRotate,
    height: '24px',
    position: 'relative',
    width: '24px'
  },
  path: {
    strokeDasharray: '1,200',
    strokeDashoffset: '0',
    animation: 'dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite',
    animationName: indeterminateCircularDash,
    strokeLinecap: 'round',
    stroke: 'red',
    strokeWidth: '2'
  }
}

class Loader extends Component {
  render() {
    const {
      type
    } = this.props;
    let loader = null;

    if ( type === 'indeterminateLinear' ) {
      loader = (
        <div style={ indeterminateLinear.progress }>
          <div style={ indeterminateLinear.before }></div>
          <div style={ indeterminateLinear.base }></div>
          <div style={ indeterminateLinear.after }></div>
        </div>
      );
    } else {
      loader = (
        <div>
          <div style={ indeterminateCircular.loader }>
            <svg style={ indeterminateCircular.circular } viewBox="25 25 50 50">
              <circle style={
                indeterminateCircular.path
              } cx="50" cy="50" r="20" fill="none" strokeMiterlimit="10"/>
            </svg>
          </div>
        </div>
      );
    }

    return (
      <div>{ loader }</div>
    );
  }
}

Loader.propTypes = {
  type: PropTypes.string,
};

export default radium(Loader);

当我包含 Loader 组件时，它可以毫无问题地工作和动画；但是，当我请求获取一些数据时，动画会停止。我还可以注意到，在 React 重新渲染并显示获取的数据之前，其他所有内容都冻结了。

此 Loader 组件包含在连接到 reducer 的顶级组件中，当获取数据时，将显示该组件。

{ this.props.globalState.someReducer.isFetching ?
  <Theme render="Loader" type="indeterminateLinear" /> : null
}

编辑 2

我想添加另一个用例。这个时间和redux无关，所以我们可以把它从图中去掉。它必须与自身react。

我有一个页面列出了一些项目，大约。40 项，我有一个按日期对列表进行排序的按钮。

这就是我的渲染函数中的内容：

const sortDesc = ( a, b ) => (
    transactions[b].updatedAt ||
    transactions[b].createdAt) -
    (transactions[a].updatedAt ||
    transactions[a].createdAt
)
const sortAsc = ( a, b ) => (
    transactions[a].updatedAt ||
    transactions[a].createdAt) -
    (transactions[b].updatedAt ||
    transactions[b]. createdAt
)

let sortDate = sortDesc;
if (!this.state.sortDesc) {
  sortDate = sortAsc
}

<button onClick={ this.handleSortBy }>sort by date</button>

        {
          Object.keys(transactions)
            .sort(
              sortDate
          ).map(( key, index )=> {

            return (
              <div key={ index }>
                <Payout {...this.props} />
              </div>
            );
          })
        }

我的Loader组件位于父组件中。结构可能是这样的：

-- 布局 <-- 这里我们有加载器

---- Transactions <-- 这里是排序函数

------ 支付 <-- 子组件

现在，每次我点击排序按钮时，一切都会冻结，直到排序完成。当我说“一切”时，它是指所有组件，包括父组件（在本例中为Layoutand Loader）。

Loader是用镭建造的。

我一定在这里遗漏了一些东西，我不敢相信当子组件重新渲染时所有组件都会冻结。