[React] Use CSS Transitions to Avoid a Flash of Loading State
2023-09-14 08:59:14 时间
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; }
相关文章
- 分析一个react项目
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- [React Testing] Test a Custom React Hook with React’s Act Utility and a Test Component
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React] Override webpack config for create-react-app without ejection
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- [React Flow] Up and Running with Facebook Flow for Typed JavaScript
- React 函数组件传递ref
- [React Testing] Create a Custom Render Function to Simplify Tests of Redux Components
- [React + Functional Programming ADT] Create Redux Middleware to Dispatch Multiple Actions
- [React] Override webpack config for create-react-app without ejection
- [React] {svg, css module, sass} support in Create React App 2.0
- [React] Define defaultProps and PropTypes as static methods in class component
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- [React] Extracting Private React Components
- react服务端渲染同构报错Browser history needs a DOM
- React(一)react概述、组件、事件
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.