zoukankan      html  css  js  c++  java
  • [React] Use CSS Transitions to Avoid a Flash of Loading State

    Based on research at Facebook, we know that if a user sees a flash of loading state, they perceive the app as being slower. So let's improve the pending experience for users with faster connections using css transitions to avoid showing the loading state right away.

    import React from 'react'
    import fetchPokemon from '../fetch-pokemon'
    import {
      ErrorBoundary,
      createResource,
      PokemonInfoFallback,
      PokemonForm,
      PokemonDataView,
    } from '../utils'
    
    function PokemonInfo({pokemonResource}) {
      const pokemon = pokemonResource.read()
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
    
    const SUSPENSE_CONFIG = {timeoutMs: 4000}
    
    function createPokemonResource(pokemonName) {
      return createResource(() => fetchPokemon(pokemonName))
    }
    
    function App() {
      const [pokemonName, setPokemonName] = React.useState('')
      const [startTransition, isPending] = React.useTransition(SUSPENSE_CONFIG)
      const [pokemonResource, setPokemonResource] = React.useState(null)
    
      function handleSubmit(newPokemonName) {
        setPokemonName(newPokemonName)
        startTransition(() => {
          setPokemonResource(createPokemonResource(newPokemonName))
        })
      }
    
      return (
        <div>
          <PokemonForm onSubmit={handleSubmit} />
          <hr />
          <div className={`pokemon-info ${isPending ? 'pokemon-loading' : ''}`}>
            {pokemonResource ? (
              <ErrorBoundary>
                <React.Suspense
                  fallback={<PokemonInfoFallback name={pokemonName} />}
                >
                  <PokemonInfo pokemonResource={pokemonResource} />
                </React.Suspense>
              </ErrorBoundary>
            ) : (
              'Submit a pokemon'
            )}
          </div>
        </div>
      )
    }
    
    export default App
    .pokemon-info.pokemon-loading {
      opacity: 0.6;
      transition: opacity 0s;
      /* note: the transition delay is the same as the busyDelayMs config */
      transition-delay: 0.4s;
    }
  • 相关阅读:
    边界扫描的测试原理及九大指令
    边界扫描(boundary scan)
    setup&hold
    使用InstallShield打包windriver驱动-转
    一个完整的Installshield安装程序实例-转
    高通Trustzone and QSEE介绍
    Linux ALSA声卡驱动之五:移动设备中的ALSA(ASoC)
    Linux驱动中completion接口浅析(wait_for_complete例子,很好)
    dmesg 的时间戳处理
    linux popen函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12017130.html
Copyright © 2011-2022 走看看