CODEWITHSUNDEEP
javascriptreactjs
cross19xx
cross19xx

Reputation: 3487

Loader in React

I noticed this trend in modern React aplications where there is a horizontal bar at the top (similar to the one in YouTube and GitHub), which fills up before the component is shown. I'm assuming that the loader is not there for show, because when there is very slow connection, the loader seems stuck.

How do I implement this feature in React

Upvotes: 0

Views: 267

Answers (2)

callback
callback

Reputation: 4122

While you can create a component by yourself to handle such feature, there are libraries that can do that for you.

A straight forward one is: https://www.npmjs.com/package/react-redux-loading-bar

Upvotes: 0

snowbillr
snowbillr

Reputation: 165

I think most of the loading bars you see are in fact fake in terms of tracking progress, but real in terms of tracking when an ajax request was fired off and when that ajax request has received a response.

There's a great library called NProgress - http://ricostacruz.com/nprogress/ that has no dependencies and implements a fake loading bar. And it gives examples of hooking it up to different libraries.

There are probably React wrappers out there for this library or similar ones to do put it into your UI. You'll also have to hook it up to any ajax requests that are getting made on the page.

Upvotes: 2

Related Questions