Create core elements for most common use cases

[haotangio]

ACs

• Loading indicator
  • Loading indicator without any data rendered
  • No loading indicator
  • Overlay loading
  • Shadow loading feature
  • Default loading indicator component from global config
  • Reload button stay or change status to indicate loading in progress
• Reload feature
  • Reload in shadow
  • Can reload data outside of fallback component
• Initial value
• Error handling
  • errorFallback prop
  • Error not handled by fallback but rather by function, e.g: toarst(err.message)
  • Show current data instead of errorFallback on error
  • Error shown + shadow reload + reload button clicked => show loading indicator?
• Layout' context and context consumer
• "Load more" use case
• Showing loaded data
• Children showing all status: data, error, progress, loading status, etc.
• Reload on changes. E.g: analytic dashboard got date range or sort option changed
  • Many cards inside having loading indicator
  • 1 single request to server
• Static part vs dynamic part

Checklist

• Uphill
  • What are core component?
  • How to name them?
  • Can cancel on going loading?
  • How about timeout for function?
  • Loading inside some static UI parts
  • Display animation?
  • Auto reload period?
  • Reload on implicit event trigger?
  • How about progress with percentage indicator? (1%-100% running)
  • How about ability to change the fetchFn function, will the UI get reloaded?
  • How about example with NProgress https://www.npmjs.com/package/nprogress?
  • How about using onEvent?
• Downhill
  • Create global config provider
  • Create context provider
  • Create context hook
  • Add support for loading indicator
  • Add support for loading indicator
  • Support auto reload when something changes (e.g: filter search sort conditions, etc.)