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;
    }
  • 相关阅读:
    能者摹形 大师窃意
    Nginx负载均衡的详细配置及使用案例详解.
    Zookeeper 4、Zookeeper开发
    nginx负载均衡
    Git:husky > npm run s precommit
    关于数据库路径 DataDirectory
    关于在VS2010 ASP.NET MVC3中使用WebService的实例
    SQLite的SQL语法
    获取IE可见高度和内容高度 记录
    转文:ASP.NET运行机制原理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12017130.html
Copyright © 2011-2022 走看看