|
2 | 2 |
|
3 | 3 | # react-promise-tracker |
4 | 4 |
|
5 | | -Simple promise tracker React Hoc. You can see it in action in this [Live Demo](https://codesandbox.io/s/wy04jpmly7), and find the basic info to get started in this [post](https://www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls). |
| 5 | +Simple promise tracker React Hoc. You can see it in action in this [Live Demo](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/00-example-basic), and find the basic info to get started in this [post](https://www.basefactor.com/react-how-to-display-a-loading-indicator-on-fetch-calls). |
6 | 6 |
|
7 | 7 | For detailed information check out the [project site](https://lemoncode.github.io/react-promise-tracker/) |
8 | 8 |
|
9 | 9 | # Why do I need this? |
10 | 10 |
|
11 | 11 | Sometimes we need to track blocking promises (e.g. fetch or axios http calls), and control whether to |
12 | 12 | display a loading spinner indicator not, you have to take care of scenarios like: |
13 | | - - You could need to track several ajax calls being performed in parallel. |
14 | | - - Some of them you want to be tracked some others to be executed silently in background. |
15 | | - - You may want to have several spinners blocking only certain areas of the screen. |
16 | | - - For high speed connection you may wat to show the loading spinner after an small delay of time |
| 13 | + |
| 14 | +- You could need to track several ajax calls being performed in parallel. |
| 15 | +- Some of them you want to be tracked some others to be executed silently in background. |
| 16 | +- You may want to have several spinners blocking only certain areas of the screen. |
| 17 | +- For high speed connection you may wat to show the loading spinner after an small delay of time |
17 | 18 | to avoid having a flickering effect in your screen. |
18 | 19 |
|
19 | 20 | This library implements: |
20 | | - - A simple function that will allow a promise to be tracked. |
21 | | - - A Hook + HOC component that will allow us wrap a loading spinner (it will be displayed when the number of tracked request are greater than zero, and hidden when not). |
| 21 | + |
| 22 | +- A simple function that will allow a promise to be tracked. |
| 23 | +- A Hook + HOC component that will allow us wrap a loading spinner (it will be displayed when the number of tracked request are greater than zero, and hidden when not). |
22 | 24 |
|
23 | 25 | # Installation |
24 | 26 |
|
@@ -70,8 +72,7 @@ export const LoadingSpinerComponent = (props) => { |
70 | 72 | - [Demo page](http://www.davidhu.io/react-spinners/) |
71 | 73 | - [Github page](https://github.com/davidhu2000/react-spinners) |
72 | 74 |
|
73 | | - |
74 | | -- Then in your application entry point (main / app / ...) just add this loading spinner to be displayed: |
| 75 | +* Then in your application entry point (main / app / ...) just add this loading spinner to be displayed: |
75 | 76 |
|
76 | 77 | ```diff |
77 | 78 | import React from 'react'; |
@@ -162,21 +163,21 @@ export const Spinner = (props) => { |
162 | 163 |
|
163 | 164 | Full examples: |
164 | 165 |
|
165 | | -- [00 Basic Example](https://codesandbox.io/s/wy04jpmly7): minimum sample to get started. |
| 166 | +- [00 Basic Example](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/00-example-basic): minimum sample to get started. |
166 | 167 |
|
167 | | -- [01 Example Areas](https://codesandbox.io/s/wy04jpmly7): defining more than one spinner to be displayed in separate screen areas. |
| 168 | +- [01 Example Areas](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/01-example-areas): defining more than one spinner to be displayed in separate screen areas. |
168 | 169 |
|
169 | | -- [02 Example Delay](https://codesandbox.io/s/kwrrjjyjm5): displaying the spinner after some miliseconds delay (useful when your users havbe high speed connections). |
| 170 | +- [02 Example Delay](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/02-example-delay): displaying the spinner after some miliseconds delay (useful when your users havbe high speed connections). |
170 | 171 |
|
171 | | -- [03 Example Hoc](https://codesandbox.io/s/j2jjrk4ply): using legacy high order component approach (useful if your spinner is a class based component) |
| 172 | +- [03 Example Hoc](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/03-example-hoc): using legacy high order component approach (useful if your spinner is a class based component) |
172 | 173 |
|
173 | | -- [04 Initial load](https://codesandbox.io/s/j2jjrk4ply): launching ajax request just on application startup before the spinner is being mounted. |
| 174 | +- [04 Initial load](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/04-initial-load): launching ajax request just on application startup before the spinner is being mounted. |
174 | 175 |
|
175 | | -- [05 Typescript](https://codesandbox.io/s/5ww39l90yp): full sample using typescript (using library embedded typings). |
| 176 | +- [05 Typescript](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/05-typescript): full sample using typescript (using library embedded typings). |
176 | 177 |
|
177 | | -- [06 Suspense Like](https://codesandbox.io/s/6w1oly0x9r): sample implementing a suspense-like component (typescript). |
| 178 | +- [06 Suspense Like](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/06-suspense-like): sample implementing a suspense-like component (typescript). |
178 | 179 |
|
179 | | -- [07 Suspense Custom](https://codesandbox.io/s/jjkm4vvqr5): sample implementing a suspense-like component that can be customized by passing a spinner component of your choice (typescript). |
| 180 | +- [07 Suspense Custom](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/07-suspense-custom): sample implementing a suspense-like component that can be customized by passing a spinner component of your choice (typescript). |
180 | 181 |
|
181 | 182 | # About Basefactor + Lemoncode |
182 | 183 |
|
|
0 commit comments