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;
    }
  • 相关阅读:
    mysql 状态查看
    Float浮点内存存储方式 转
    printf("%d",5.01)和printf("%f",5)的输出结果
    RMBP
    小D课堂【SpringBoot】接口Http协议开发实战
    尚硅谷【SpringBoot】web(源码讲解太多不建议阅读)
    尚硅谷【SpringBoot】入门
    51cto-spring boot(一Spring4快速入门)
    Eclipse使用Maven时出现:Index downloads are disabled, search results may be incomplete.问题解决
    maven(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12017130.html
Copyright © 2011-2022 走看看