css - 获取数据时显示 CSS 加载指示器

Question

我有一个不确定的线性 css 加载指示器，就像 Material 设计中的那样。每次我从 Redux 的 reducer 获取数据时，我都会显示这个指示器。问题是当指示器出现时，它并没有被激活。看起来整个页面都卡住了，直到 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 组件位于父组件中。结构可能是这样的:

-- 布局 <-- 这里我们有 Loader

---- 交易 <-- 这里是排序函数

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

现在，每次我点击排序按钮时，所有内容都会卡住，直到排序完成。当我说“一切”时，它意味着所有组件，包括父组件(在本例中为 Layout 和 Loader)。

Loader 是用 Radium 构建的。

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

Answer 1

我终于解决了。经过一些研究，我学到了很多关于 web workers 的知识，只是发现它不是正确的解决方案。无论如何，它与 javascript 的工作方式有关。 Javascript 是单线程的，因此是阻塞的。所以当我们有一些任务需要一些时间(在我的例子中是一秒钟左右)时，我们在屏幕上看到的一切都会卡住，甚至是 css 动画!这确实取决于您使用的浏览器。就我而言，我使用的是 Chrome。我在 firefox 上测试过，动画没有停止。

让我们来看看解决方案。我注意到 Chrome 在转换方面存在一些问题，特别是一些基本的 css 元素，例如顶部、右侧、底部、左侧、边距……所以我不得不使用转换。也不是所有的转换都有效。例如，翻译百分比不起作用，所以我不得不使用像素。为此，我需要计算父元素的宽度并进行一些计算，以便能够将 X 轴上的子元素从屏幕左侧平移到屏幕右侧。

我会用实际代码更新这篇文章。