Data Fetching/Loading Animations

[zhanbei]

The animations are better added around the process of data fetching/loading.

• Initial
  • Welcome
  • Reset
• Loading
  • Initializing
  • Refreshing
    • AutoRefreshing
  • Retrying
    • Timeout
• Fetched
  • Error
    • Timeout
  • Success
    • Empty-Data

Hence there are simplified versions of patterns -- the choices of tastes, to meet your application(s).

• ref streamich/react-use: React Hooks - Github
• ref rehooks/awesome-react-hooks: Awesome React Hooks - Github

[zhanbei]

Simplified Version A

• 1.a Loading
• 1.b Refreshing
• 2.a Error
  • Environment(Network/Timeout) Error
  • Client Error
  • Server Error
  • Unknown Error
• 2.b Success
  • Empty Data
  • Real Data

[zhanbei]

Here is a sample implementation of the Simplified Version A.