{"_id":"react-promise-tracker","_rev":"21-4538a6441ac0fbea8b4b20c2e8fbbbef","name":"react-promise-tracker","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","dist-tags":{"latest":"2.1.1","beta":"2.1.1-beta.0"},"versions":{"0.0.1":{"name":"react-promise-tracker","version":"0.0.1","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","main":"./src/index.js","jsnext:main":"es/index.js","files":["lib","es","src","dist"],"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib","build:es":"cross-env BABEL_ENV=es babel src --out-dir es","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p"},"repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"author":{"name":"Lemoncode"},"license":"MIT","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","rimraf":"^2.6.2","webpack":"^3.8.1"},"gitHead":"e7278860c2b6a53a77987cb081244acb5a8573fc","_id":"react-promise-tracker@0.0.1","_npmVersion":"5.2.0","_nodeVersion":"6.9.2","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-f0FAc0K3jG9ueumZEMUu6PBtD3KmC5ZRY41YFHxYVWFgbbQkZQBt0f0mu4t6ugxSqpEmdUuNchF/a+ZCRxjY2w==","shasum":"cfa678f0ea08ac30375708a35d5b954623c65a01","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-0.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFl4Lh+/gEteP62VGdKdRdBvlmZM9f+pwZRjp23x8oW1AiB8YmzCYmCWnKOVDSGQUIwXLoe53wEA57S2NwtArDmHWA=="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker-0.0.1.tgz_1509438904898_0.03783561382442713"},"directories":{}},"0.0.2":{"name":"react-promise-tracker","version":"0.0.2","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","main":"./lib/index.js","jsnext:main":"es/index.js","files":["lib","es","src","dist"],"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib","build:es":"cross-env BABEL_ENV=es babel src --out-dir es","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p"},"repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"author":{"name":"Lemoncode"},"license":"MIT","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","rimraf":"^2.6.2","webpack":"^3.8.1"},"gitHead":"e7278860c2b6a53a77987cb081244acb5a8573fc","_id":"react-promise-tracker@0.0.2","_npmVersion":"5.2.0","_nodeVersion":"6.9.2","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-8/PpE6pAdTlmjnW6XGBPDb7pcqw8LZKVJVgok/LrN06BQTUtKN5C6mUaJZ9mrewZTdWfL9NgG9R3NGLwKcxP1w==","shasum":"c3a3c949995a5284d700ccc31a1aeb6cf6de5fa9","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-0.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+WJRiKGTo00xJNG0+ZkPzdybbfogLNaAcpktic8MKxgIhAL8GAlKN8nkEJ3ZcXWHlJax7pFvJJv5A6unfF9qXjepC"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker-0.0.2.tgz_1509439296813_0.9266736179124564"},"directories":{}},"1.0.0":{"name":"react-promise-tracker","version":"1.0.0","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"files":["lib","es","src","dist","index.d.ts"],"main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files --ignore spec.js,test.js","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --copy-files --ignore spec.js,test.js","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll"},"dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","jest":"^21.2.1","react-dom":"^16.1.1","react-test-renderer":"^16.1.1","regenerator-runtime":"^0.11.0","rimraf":"^2.6.2","webpack":"^3.8.1"},"jest":{"setupFiles":["./test/shim.js","./test/jestsetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testPathIgnorePatterns":["/node_modules/","/dist/","/es/","/lib/"]},"gitHead":"0ebb86f4e14e7c84b91bc05b065a5dad4e1d6460","_id":"react-promise-tracker@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-I8E69DQhXQXz3GVTuD0SUE5VUYGjA1OWTR0ILPlqkEH9V4YVfbbs902tMBm1VK6PSatNrUWoIa+p95PrEcbAaA==","shasum":"69bbb7136fa53828327fd77b2137ee8809579ce7","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-1.0.0.tgz","fileCount":20,"unpackedSize":39283,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCay0FBn6fsDbUz0RNXLpq9tzHftiPUUQhPiPX6RNPzkAIgIg55jf2J9+dOYJygEE18MQ9hF4VA/UmJNN4P6rxyBjA="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_1.0.0_1522060239519_0.9403798650823327"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-promise-tracker","version":"1.0.1","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"files":["lib","es","src","dist","index.d.ts"],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files --ignore spec.js,test.js","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --copy-files --ignore spec.js,test.js","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll"},"dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","jest":"^21.2.1","react-dom":"^16.1.1","react-test-renderer":"^16.1.1","regenerator-runtime":"^0.11.0","rimraf":"^2.6.2","webpack":"^3.8.1"},"jest":{"setupFiles":["./test/shim.js","./test/jestsetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testPathIgnorePatterns":["/node_modules/","/dist/","/es/","/lib/"]},"gitHead":"13c756ab20592dad3697b102bf964e9d8a254cbf","_id":"react-promise-tracker@1.0.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-8j8gt2dkf0eVbxdcKKnZNC0B3oZpj/z0kl1J0Cp5fqd/IKj7F+zNoO6LmEn8lUfmvHrX6sxoTFzAWyAEsn8e4A==","shasum":"cd01f6dcce51aef22ad365bca098e2493b0f23b0","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-1.0.1.tgz","fileCount":20,"unpackedSize":39401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1f3MCRA9TVsSAnZWagAAVYUP/2M8kgKOzOGbtVmsDesr\nfowqz+mAMDDhZZOuN/G2Z44+zG4v5XTlL6QrNrg59xiLP158zGx4RO5Kph/n\nTyEf0HWy5nWuD93frI2i+tY8qKhf2hp8OGqdTyPuqXDoME3ifgrjoufZCyHY\ncOn5oGkSgipw60ThbIYz26cp4XAIm1XF7dtrG+/pV0bb/MF3RVlaa+p9eijq\nuwUjs3ah1cVQCL7/0BoOkb6489d9SgSa5Fli9ucfKro05dvcteQKNcDya2h3\nCOIc/vbu0JrGcOj2S3O885cCwdeBIp3BwMcrQyUZ5i606ZBbr0XnHdbObxHm\ndIpFgT7/rWg4RIcMxZZ+twVlMKOUvWplFE+DGP+F0TlpgeAZ8nLjGMc0eVud\nAt7CqNy4IUdbSzti3aILDKC5OBsulJJobPeCS0DfFjNLNqnQ2jlMvnnbRapT\nGMVX9RXcwHhN9kRj7gM8L06674fxkX/o/nlIJls/RYKr5DNf+RM4JLKNuXOb\nUUCzgkN5szLWwJnh8g9hwWtZPHXRsfguFYDwfoU/TpoBTM5TbdZv9sX1y2EQ\n4ODYsyfUAbl0vXErg+txIGLfJBLH0+w/Q+AVH+vGlQnRvgXXRMb+JKkQOVpq\n/5W08DsSiwrPPuVFpM3pUH18fRuNFi0hFKtoGQ+5lsb022pAVstykYVEa0W3\nwy5M\r\n=nl1k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJViYNmopOuDI2H6XIcdVv433VDnozQCXHefJCwx3UAAIgfdi8+nArAfgjfCj+ORtKjUG+8sWzZD45nbbsblNkNjE="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_1.0.1_1523973579864_0.3040551565615639"},"_hasShrinkwrap":false},"1.0.2":{"name":"react-promise-tracker","version":"1.0.2","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"files":["lib","es","src","dist","index.d.ts"],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files --ignore spec.js,test.js","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --copy-files --ignore spec.js,test.js","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll"},"dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","jest":"^21.2.1","react-dom":"^16.1.1","react-test-renderer":"^16.1.1","regenerator-runtime":"^0.11.0","rimraf":"^2.6.2","webpack":"^3.8.1"},"jest":{"setupFiles":["./test/shim.js","./test/jestsetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"testPathIgnorePatterns":["/node_modules/","/dist/","/es/","/lib/"]},"gitHead":"0fe406a2ec31d283d945327c97f5b9d42468e4b3","_id":"react-promise-tracker@1.0.2","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-j2GIwk2J0akUj7mQStE5IURddTSJ/Y4wIRAdqblKcFJh29qmdD8Zn53YpQnM/hA3tNZisPEtLqObHZMjOvcR9A==","shasum":"a435919470cfd8f7345a3252ae1aeb57a4aa818a","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-1.0.2.tgz","fileCount":20,"unpackedSize":39478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8JpPCRA9TVsSAnZWagAACy8P/1DSqOnYK7fP1FuJzfmL\ncFTYwQTUYCWwyie4dCmYun/7GUAZ+eWOiJbCaiTcPPY0+pm89mb9lwX1hfcC\nHPk5BVKZUN1qq9SVhnJGVo+1tBQbbQYYl3UBw1jaxlgwIIq+qpXAxk3YAY5u\nEUhOh4Ql9yQixa9Cr2iE8ikX2J6D6/9nzcmtJsR0mMabu41gDW1+/cradPC7\nR/QP1dZ7llwHPcjXkzYg5Kti1p7ivShehQMhL1X0v2l7/02qnjcsR1F7MxyN\ng+M9H+DQ3OIr1LKblKRWb0I5ftq9WTVTQh82B6pVvZRImE2sIhC41X0zzDik\nAZ1pl5kgg5XY8jJNXNaVt7PPNoVDU+u55w9C/LDiR/td7tchrfPJtagyVE6O\nRwabeMNSL8QiE+aOtgXXd9xwY+QVNWIu3mso0Zcq09CpRzVYEmoez5Uc6E3l\nR79m6GTuFVdO6X6wctbGlfEWTdlu1Ua0+Cvq9a+TEphaisOyTtqNwKs+zE1z\nFWithnE8ZH70szi0P78qhUJwITvHxf+G9mjHitBKWAywOnea7AnAML0+EZYw\nUdqP0DtT5waOlNehnDEXEklr9F+On6U9EmjJUokozJ1L2dk/8AlNiNE8ONrE\n5cQ/c8qrRW1S2bHkn09Iz5VuVrxn6ggG3qVsp0QgY2Lpnow9rcWeJzepifeP\nCG75\r\n=xl7i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV+KcDaFt/0sZdmuC9PehtR2CW6PyC1O/dnxQoeAD8QgIhAMxLDwvtLDKh73PEcP2T05RcRwRfXO6xgICxwLPYO9OO"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_1.0.2_1525717581405_0.5875336975666501"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-promise-tracker","version":"1.1.0","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files --ignore spec.js,test.js","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --copy-files --ignore spec.js,test.js","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll"},"dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","jest":"^23.5.0","react-dom":"^16.1.1","react-test-renderer":"^16.1.1","regenerator-runtime":"^0.11.0","rimraf":"^2.6.2","webpack":"^3.8.1"},"jest":{"setupFiles":["./test/shim.js","./test/jestsetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/","/dist/","/es/","/lib/"]},"gitHead":"b37e643b8477b9bfcb51c7665bc98387e251af77","_id":"react-promise-tracker@1.1.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-lANbMaEYxiJHAbxtfeG7NFQGynU2dov9m3XgqAMG5I0o9r9SV7WtZjLU/OwE8enUej2jQjVmAWqjqm+KQwq4QQ==","shasum":"581dc2eda81017114ace091c29909053186a83aa","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-1.1.0.tgz","fileCount":24,"unpackedSize":50154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl291CRA9TVsSAnZWagAAyoEP/1UNHUctTludQYGVqagy\n2MaB1VLqmB2WI5yC2Z5qMC1sn8sOKnfvWeS+H6/O9bwzr8EN13lerVR7bmOW\njnPYvx/lxfjkXQsrxce/6bbcSqK2O7d6ZqR1eExj9mbbSedE5Lee5IC6WNJ8\njUzzIhS6mu6nuF4QLJOwr1Qr/gFu/YrmDy9sKbSLlPxjMMJonr2TrtpxFmvi\nGPTZSPrsi/Y5CkC8U/og4m3PeLW9ta1E2Z3Ulgf5W4cC8lsWfaO5N9drusG5\nqNLLisuq5wZuRvl/OTxgiex7TskIt6bxlrs+VGUqNO5J1UPHXvpCQziTYUQ0\nFURzzu0BacwMK28vxbJwcYi7D783/NbmjxDleOMrNgMlLzw0GX3FEw3ZiTU6\nxQwM5zh2CbSWMKSv2G5+Ys1F1SwZQHlAfyqc8AolKf8MdUpNaADBP0DkJyZ8\n9UlqImyoTqmxfOkHi5+nDsXIlcPmChg1PhJYt26+4ArLEdWXBAOA32D2ekcg\nnwjc/mncJKln5VcIkDIujk42B0r2A5xLizyEroWcJAtVa2YwRxb2RsSZK1B5\n2LeJj3rkIXeyPOy8UjCLHyAIJTg5XyPNHTYfg7PgWao/6D/Ax5Enp9/4bkNs\nHABkqk9aCH0u+V3j2ymye46xPJPCvgqAeMVecXPF7jOyF54Ypgy7VYJ6cDN0\n7p65\r\n=fmON\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/5uwlRn/g20HGVuY3cj+cBfEnxatJO2SP+3KCZ2LifAIgbe1uJngD0KktlR0R8a/RssQehYTNnKWA2HgImB4vWco="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_1.1.0_1536651124873_0.791191576915395"},"_hasShrinkwrap":false},"1.1.1":{"name":"react-promise-tracker","version":"1.1.1","description":"Simple React Promise tracker Hoc, helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf lib dist es","prepublish":"npm run clean && npm run build","build":"npm run clean && npm run build:commonjs && npm run build:umd && npm run build:umd:min && npm run build:es","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files --ignore spec.js,test.js","build:es":"cross-env BABEL_ENV=es babel src --out-dir es --copy-files --ignore spec.js,test.js","build:umd":"cross-env BABEL_ENV=commonjs NODE_ENV=development webpack","build:umd:min":"cross-env BABEL_ENV=commonjs NODE_ENV=production webpack -p","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll"},"dependencies":{"react":"^16.0.0"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","cross-env":"^5.1.1","enzyme":"^3.2.0","enzyme-adapter-react-16":"^1.1.0","enzyme-to-json":"^3.2.2","jest":"^23.5.0","react-dom":"^16.1.1","react-test-renderer":"^16.1.1","regenerator-runtime":"^0.11.0","rimraf":"^2.6.2","webpack":"^3.8.1"},"jest":{"setupFiles":["./test/shim.js","./test/jestsetup.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/","/dist/","/es/","/lib/"]},"gitHead":"bacd6aacc868981f9de4ed381831f109ae87c669","_id":"react-promise-tracker@1.1.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-R76UJY1igIkajSPM/B0QlboH0NVnDUkjgY9DTM2PPFutmKXId8qGM2q4rsnSso62zL81oB+Rba7FG9KphZGOcw==","shasum":"07de0637b34e7495481b9300b1126197b5f7ea6c","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-1.1.1.tgz","fileCount":24,"unpackedSize":55186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo4DACRA9TVsSAnZWagAA8O8P/iMxGl3bzib+RwlFG/EI\nkYGshyfnzRSSAn2knsSjeMpBq+L1amy8NI9QyOAISdfboa7g39n0jglEA0Cd\n4Jr9+ppry/mkpQmPEGxPD+M06c+35cPzXb0immuBkmhpeNp+wxow3+ye+awj\nfdSUIwf+G/EJSj2oJnhBUKFqE+OmwFczzv6WZjymNh71G7OAkkaaUXo18rYO\nKp0cBPoWT95PTfhBlu7ZCPbrG67AbPsyg7QDuJbiPjAgXfm9tzzMJSX3+yn1\nJLlz2dsGeAx6yCtpgmSwv4FrYQVzFrvd+O8ZqCrfOrEDH6mI+oTOccxOzbNZ\n8/GN3lRLudT0//+RexeRLxqUj0oWLnMpEYc//jbZGpImIDQBjijdrlF0DT2s\nVjJcufay6jCB5gRzKRsjhCfh4JPQEgMlB+o/jTFCZ8FPm2AQdTsjYJlh66Fh\nfMPmXanQNa4TpMwy2dEPzS8c/7qH33qmtsSANWj2z70uLMj41Z0VEUh3NuBB\nyzgAgwJBaqbUymOkEFC5tPRwoOHlb+5LtDfadYMS30g6QLMEDQpH5DYYTI7B\nUgu2xDMtx2kRDtunkXBtRrk6UquN+SPnLOtXmulxknxxDVpWZm7oAaqJB/sg\n+X+8fODv9kCrLbJWdF2RfWEuGLyjHx5lK/GZtQd9iSrhh0VIfdt7HqzHYYnu\n4Ihk\r\n=W5U+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbsnMWOU8zPKY1MGSir5/qpWxhzViuzuGQvbSUCWS1uAiEAgIQoTocOJEHinLoKoekk77+pfO8paNI+HQAcrlH6FbE="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_1.1.1_1537441984030_0.15068413313843076"},"_hasShrinkwrap":false},"2.0.0-beta.1":{"name":"react-promise-tracker","version":"2.0.0-beta.1","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/","/build/"]},"gitHead":"3b505d8d5c000dfed52746a022fcaf707f9b4aae","readme":"# react-promise-tracker\r\n\r\nSimple promise tracker React Hoc. You can see it in action in this [Live Demo](https://stackblitz.com/edit/react-promise-tracker-default-area-sample), 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).\r\n\r\n## Why do I need this?\r\n\r\nSometimes we need to track blocking promises (e.g. fetch http calls), to choose between displaying a loading spinner or not.\r\n\r\nThis library implements:\r\n\r\n- A simple function that will allow a promise to be tracked.\r\n- An 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).\r\n\r\n## Installation\r\n\r\n```cmd\r\nnpm install react-promise-tracker --save\r\n```\r\n\r\n## Usage\r\n\r\nWhenever you want a promise to be tracked, just wrap it like in the code below:\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n//...\r\n\r\n+ trackPromise(\r\n    fetchUsers(); // You function that returns a promise\r\n+ );\r\n```\r\n\r\nThen you only need to create a component that will defined a property called _trackedPromiseInProgress_\r\n\r\nAnd wrap it around the _promiseTrackerHoc_\r\n\r\n## Basic sample\r\n\r\n```diff\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n+ import { promiseTrackerHoc} from 'react-promise-tracker';\r\n\r\nconst InnerLoadingSpinerComponent = (props) => {\r\n  return (\r\n    <div>\r\n    {\r\n      (props.trackedPromiseInProgress === true) ?\r\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\r\n      :\r\n        null\r\n    }\r\n  </div>\r\n  )\r\n};\r\n\r\nInnerLoadingSpinerComponent.propTypes = {\r\n  trackedPromiseInProgress : PropTypes.bool.isRequired,\r\n};\r\n\r\n+ export const LoadingSpinnerComponent = promiseTrackerHoc(InnerLoadingSpinerComponent);\r\n```\r\n\r\n- To add a cool spinner component you can make use of _react-spinners_:\r\n\r\n  - [Demo page](http://www.davidhu.io/react-spinners/)\r\n  - [Github page](https://github.com/davidhu2000/react-spinners)\r\n\r\n- Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const AppComponent = (props) => (\r\n  <div>\r\n    <h1>Hello App!</h1>\r\n+   <LoadingSpinnerComponent />\r\n  </div>\r\n);\r\n```\r\n\r\n## Sample with areas\r\n\r\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\r\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\r\n\r\n![Shopping cart sample](./resources/00-shopping-cart-sample.png)\r\n\r\nWe could add the `default-area` to show product list spinner:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ProductListComponent = (props) => (\r\n  <div>\r\n    ...\r\n+   <LoadingSpinnerComponent /> // default-area\r\n  </div>\r\n);\r\n```\r\n\r\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ShoppingCartModal = (props) => (\r\n  <div>\r\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\r\n  </div>\r\n);\r\n```\r\n\r\nWith this approach, we don't need to define different spinners components, it's only one but it will render when we want to track the desired area:\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n...\r\n+ trackPromise(\r\n    fetchSelectedProducts();\r\n+ ,'shopping-cart-area');\r\n```\r\n\r\n## Demos\r\n\r\nIf you want to see it in action:\r\n\r\n- [Default area example](https://stackblitz.com/edit/react-promise-tracker-default-area-sample)\r\n\r\n- [Two areas example](https://stackblitz.com/edit/react-promise-tracker-two-areas-sample)\r\n\r\n## About Basefactor + Lemoncode\r\n\r\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\r\n\r\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\r\n\r\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\r\n\r\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: [http://lemoncode.net/master-frontend](http://lemoncode.net/master-frontend)\r\n","readmeFilename":"readme.md","_id":"react-promise-tracker@2.0.0-beta.1","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-DfaO4pP7W24vbEyScVo7OnEhBDpbKeyXz3Tnwju/mg8XPX2cRvMnsVAPlHK+3N0DA9PXifeBv65megEflyCywA==","shasum":"efcc1119cf8a3168ced11315fa7056c918a9983f","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.0-beta.1.tgz","fileCount":3,"unpackedSize":8928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqwHyCRA9TVsSAnZWagAAJx4P/2M84Or7urcyeUFIS5G1\n2QYUz40w8kcnZwA52Be/4J3cZzrn8+eXPiQGQlV/n0Qss2D/NQD/oSiWnv6T\npt880nN+X+KmGs0yHRFofOYvY9kbNAzGNBFsreEH9xcToyweekNwbI/VKotM\nAFV8cV6lEim2UZWxBcKx2c8erhHlpXx+gf9MuUE7zk6rVVdfX4Ggi7kzaNh1\nJH5pKll0kh52WXjiFV3Bg3AlzqK9C1UNb7+THec79E+T49c6RvNuK5rA0G5c\nFxrPDqskNKCCSDAXiX2ty6rbBNRfEBAkk1v6T8bVhUtaxhy4XJuVeETuQIeO\nK8iZTIVXSqFOE2oiQ/3p9bejBWYyuf942EgPFmEDVHGgXZchdLjXR2w0Eqab\nFApUxaZUzR6YGbY33NPT/fNnu5l2l5qnEs+laC79vXeDq/ZJbbUJmZmQwWXi\n2NphJ4OKB9AGc31uW0scDwu4VRxrMsj5SVlBF0l/FS1hC64HQQ34BP8VmZO6\nA59B9lFk+aP1mq+weZZPExqQG7+CBH4jfZSlOR3ShRVPEwvo2nqoINyKIUiP\n97eYLqVapWK0t/l9viOkKNtcGCPEcPvwF8HjJ4Xcfv4zpiATqW/cr5cusbTe\nAqUmESkKbXmMgixj2qNdWmK1dbDxgOOuKFL5BsZNr9bPHiWhemB5dDO+iAsd\nnUqr\r\n=YZB/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIZPP+KsG9zl6fN4aIhEBcQktpszCZ7nwWiQelgGPDfgIgebzuG3hh7hTYa1wmo3+FEC+HPJ3HeBf3MSkW+tFsJzQ="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.0-beta.1_1554711025206_0.15419677909808072"},"_hasShrinkwrap":false},"2.0.0-beta.2":{"name":"react-promise-tracker","version":"2.0.0-beta.2","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"fjcalzadosp@gmail.com","url":"https://github.com/fjcalzado"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/","/build/"]},"readme":"# react-promise-tracker\r\n\r\nSimple promise tracker React Hoc. You can see it in action in this [Live Demo](https://stackblitz.com/edit/react-promise-tracker-default-area-sample), 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).\r\n\r\n## Why do I need this?\r\n\r\nSometimes we need to track blocking promises (e.g. fetch http calls), to choose between displaying a loading spinner or not.\r\n\r\nThis library implements:\r\n\r\n- A simple function that will allow a promise to be tracked.\r\n- An 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).\r\n\r\n## Installation\r\n\r\n```cmd\r\nnpm install react-promise-tracker --save\r\n```\r\n\r\n## Usage\r\n\r\nWhenever you want a promise to be tracked, just wrap it like in the code below:\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n//...\r\n\r\n+ trackPromise(\r\n    fetchUsers(); // You function that returns a promise\r\n+ );\r\n```\r\n\r\nThen you only need to create a component that will defined a property called _trackedPromiseInProgress_\r\n\r\nAnd wrap it around the _promiseTrackerHoc_\r\n\r\n## Basic sample\r\n\r\n```diff\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\n+ import { promiseTrackerHoc} from 'react-promise-tracker';\r\n\r\nconst InnerLoadingSpinerComponent = (props) => {\r\n  return (\r\n    <div>\r\n    {\r\n      (props.trackedPromiseInProgress === true) ?\r\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\r\n      :\r\n        null\r\n    }\r\n  </div>\r\n  )\r\n};\r\n\r\nInnerLoadingSpinerComponent.propTypes = {\r\n  trackedPromiseInProgress : PropTypes.bool.isRequired,\r\n};\r\n\r\n+ export const LoadingSpinnerComponent = promiseTrackerHoc(InnerLoadingSpinerComponent);\r\n```\r\n\r\n- To add a cool spinner component you can make use of _react-spinners_:\r\n\r\n  - [Demo page](http://www.davidhu.io/react-spinners/)\r\n  - [Github page](https://github.com/davidhu2000/react-spinners)\r\n\r\n- Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const AppComponent = (props) => (\r\n  <div>\r\n    <h1>Hello App!</h1>\r\n+   <LoadingSpinnerComponent />\r\n  </div>\r\n);\r\n```\r\n\r\n## Sample with areas\r\n\r\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\r\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\r\n\r\n![Shopping cart sample](./resources/00-shopping-cart-sample.png)\r\n\r\nWe could add the `default-area` to show product list spinner:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ProductListComponent = (props) => (\r\n  <div>\r\n    ...\r\n+   <LoadingSpinnerComponent /> // default-area\r\n  </div>\r\n);\r\n```\r\n\r\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ShoppingCartModal = (props) => (\r\n  <div>\r\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\r\n  </div>\r\n);\r\n```\r\n\r\nWith this approach, we don't need to define different spinners components, it's only one but it will render when we want to track the desired area:\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n...\r\n+ trackPromise(\r\n    fetchSelectedProducts();\r\n+ ,'shopping-cart-area');\r\n```\r\n\r\n## Demos\r\n\r\nIf you want to see it in action:\r\n\r\n- [Default area example](https://stackblitz.com/edit/react-promise-tracker-default-area-sample)\r\n\r\n- [Two areas example](https://stackblitz.com/edit/react-promise-tracker-two-areas-sample)\r\n\r\n## About Basefactor + Lemoncode\r\n\r\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\r\n\r\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\r\n\r\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\r\n\r\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: [http://lemoncode.net/master-frontend](http://lemoncode.net/master-frontend)\r\n","readmeFilename":"readme.md","_id":"react-promise-tracker@2.0.0-beta.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-I+S8wKGooQTW38MKrl2RoLAAwcJ4Qsz7SOGh11a26qBr0xgIXr27yYb1Nar0F5qjGGXhyHt7n7MFDD5/Fb6emw==","shasum":"abc30f4e632eeb1aa9100850c3f5d704891d7780","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.0-beta.2.tgz","fileCount":19,"unpackedSize":43148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctEstCRA9TVsSAnZWagAALBwP/20oqYGdwcrxzySbG3Tk\nh5ZEbxy3gMAOe+/miYQVuoV8oVY13TItzKmed9G6b+iNb2LkMqRSbSDDiUu6\nWn49l83r8p+v7bnrwJRj6aYC8jTG4P2Zg10RGMm0oqioQwDLC6Xuf0pNZS8u\npTx+FG8YQHkxnHkQtukSo9442HTMb00DcNagUVRf5r94UBC5nE3H/xy5tai1\nwWh7wBBPNNoEMUI6GNKuy0bS308ryJNEwWxWdzRi2PLOx7HedZntnvzjSO4W\ncqrChOTnd0+/sbN6jVD9cJhZPnVM8FHuzRBwwnuPpfk2uMXytV76lBZ/csp4\ngWqJd8TlRcawntbLEnAOkhhwB75urwwOG5QJIVoL0QDQeLicZTg5LEECaoqn\nyTLAfZO+E6B2FzvSkX9jPKJSR4OmAOgvEcfj5WPYR6F5mbi3vEKgUQH5df6B\nuCkiCPB+nmS4F4npoxi5my3ammUEJOhXR2mP4u+X91qYPNeV6zYcgLQGDjhp\n0cSTqCBoy41RamHvrcsAwMEzJSoOTbpmabKFixEMV5Bd3tcpb2vvlhKpKQ3q\n4dQ127vfHTE/SQC+dE1HY0wWRgXUV7yJ42kxaaOSGYHgYO5/3SuCFmJ3KCqB\nkZ39RB6LXcjOwhtAkYDzkdBeVI48z3kti05fOQR/R8SvzSPMhHOSqiBPp8VI\nfUQn\r\n=BpBf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9fLrzCVqYoupKV7izR9X3G+GAVqmYz9IgwNHMWcYM0AiEAg9Shf7jKzVDkE+5YxTB/oxujE7oWKFKBYny6NL4uTtY="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.0-beta.2_1555319597085_0.8161345054214533"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-promise-tracker","version":"2.0.0","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/","/build/"]},"_id":"react-promise-tracker@2.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-0yMlvBfpnhOGtv1cVYPnQxitIyjKomWovz2Peqlv4tcob61NbJXQ0SG4pwzF/nKZfhy76jEAmXNf+dLnNUZ7iw==","shasum":"34c7cb032920d2fe4775eb0296718fb44251e6ae","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.0.tgz","fileCount":19,"unpackedSize":45821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctZbrCRA9TVsSAnZWagAAXW4P/1N4sas9X+Qc3SRmDGZQ\nCbResaKoVJp9l0zM7MbfZfDrCX7Mna6e3xRgfOzx6nrZ1cB3qhoTzKqMFWs1\nvc9KPQlhXMQk7iLvvZi9Sij+/SXP4bfEHpYQpTd7DrUSVhUiymcCcM77OZzW\nSZP+Jn19MAIAER5dYrxJBYZW/xV/NI2bmWrYWG5aB2HvNF17pt1Ooi6BTWnB\nQKELhBYHUgdmGyuZIUP7uB16MshQiXvJlJEn+aoj2SH7Zc8D64XXfPhzbyqm\nAoHDNnR7ppgOps7No6ySK/1XyOu5gVoKsfc7rc58YqlTcXy1onl0LtVkoDHf\n97KjBEpKFpNaQNSVKsPwrLhhX1fHqSbzbWABcXFMqr8oQ+naanw+186qAb5Q\nH/T4MxXq87Vy++5ml/FEKS0wFJLRJlmBwFecjk65tlYY6ntUgttvFztdLBxz\n5SAqSCPc4qxmfKkxmSpPE89jTa0DAFwbfiJO8RDN4iNw5Z1hUGp6Rhpxgmv1\nP3uz6dD9KMydQ5Rjsmfu2oO+TIayv459DOqSkRABic7Fncks1s3hUlIwa1cP\nkB13aivtNht1toorGShSG73UqFDfq5BTSc2582Fb/DLXKB8vM7Ozl9GqoreK\nYTIMLa95L6ioPNyROFJX9MAUwdfNsVswyyEy+oC2AKRo+qZ33NaeF7NXz4Jd\nL+mM\r\n=XNJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh01SJEf9wDdnxgO1YGeRf1FHNwADMS4ryZgv0UfRfRAIhANr5ERLj26S8KlkDlX1EE8X6zIQZSm6uTpZlXmLGHdVy"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.0_1555404522552_0.5543969478551307"},"_hasShrinkwrap":false},"2.0.1":{"name":"react-promise-tracker","version":"2.0.1","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"readme":"[![Build Status](https://travis-ci.org/Lemoncode/react-promise-tracker.svg?branch=master)](https://travis-ci.org/Lemoncode/react-promise-tracker)\r\n\r\n# react-promise-tracker\r\n\r\nSimple 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).\r\n\r\nFor detailed information check out the [project site](https://lemoncode.github.io/react-promise-tracker/)\r\n\r\n# Why do I need this?\r\n\r\nSometimes we need to track blocking promises (e.g. fetch or axios http calls), and control whether to\r\ndisplay a loading spinner indicator not, you have to take care of scenarios like:\r\n  - You could need to track several ajax calls being performed in parallel.\r\n  - Some of them you want to be tracked some others to be executed silently in background.\r\n  - You may want to have several spinners blocking only certain areas of the screen.\r\n  - For high speed connection you may wat to show the loading spinner after an small delay of time\r\n  to avoid having a flickering effect in your screen.\r\n\r\nThis library implements:\r\n  - A simple function that will allow a promise to be tracked.\r\n  - 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).\r\n\r\n# Installation\r\n\r\n```cmd\r\nnpm install react-promise-tracker --save\r\n```\r\n\r\n# Usage\r\n\r\nWhenever you want a promise to be tracked, just wrap it like in the code below:\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n//...\r\n\r\n+ trackPromise(\r\n    fetchUsers(); // You function that returns a promise\r\n+ );\r\n```\r\n\r\nThen you only need to create a spinner component and make use of the _usePromiseTracker_, this\r\nhook will expose a boolean property that will let us decide whether to show or hide the loading\r\nspinner.\r\n\r\n## Basic sample:\r\n\r\n```diff\r\nimport React, { Component } from 'react';\r\n+ import { usePromiseTracker } from \"react-promise-tracker\";\r\n\r\nexport const LoadingSpinerComponent = (props) => {\r\n+ const { promiseInProgress } = usePromiseTracker();\r\n\r\n  return (\r\n    <div>\r\n    {\r\n+      (promiseInProgress === true) ?\r\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\r\n      :\r\n        null\r\n    }\r\n  </div>\r\n  )\r\n};\r\n```\r\n\r\n- To add a cool spinner component you can make use of _react-spinners_:\r\n\r\n  - [Demo page](http://www.davidhu.io/react-spinners/)\r\n  - [Github page](https://github.com/davidhu2000/react-spinners)\r\n\r\n\r\n- Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const AppComponent = (props) => (\r\n  <div>\r\n    <h1>Hello App!</h1>\r\n+   <LoadingSpinnerComponent />\r\n  </div>\r\n);\r\n```\r\n\r\n## Sample with areas:\r\n\r\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\r\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\r\n\r\n![Shopping cart sample](/resources/00-shopping-cart-sample.png)\r\n\r\nThe _promiseTracker_ hooks exposes a config parameter, here we can define the area that we want to setup\r\n(by default o area). We could just feed the area in the props of the common spinner we have created\r\n\r\n```diff\r\nexport const Spinner = (props) => {\r\n+  const { promiseInProgress } = usePromiseTracker({area: props.area});\r\n\r\n  return (\r\n    promiseInProgress && (\r\n      <div className=\"spinner\">\r\n        <Loader type=\"ThreeDots\" color=\"#2BAD60\" height=\"100\" width=\"100\" />\r\n      </div>\r\n    )\r\n  );\r\n};\r\n```\r\n\r\nWe could add the `default-area` to show product list spinner (no params means just default area):\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ProductListComponent = (props) => (\r\n  <div>\r\n    ...\r\n+   <LoadingSpinnerComponent /> // default-area\r\n  </div>\r\n);\r\n```\r\n\r\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\r\n\r\n```diff\r\nimport React from 'react';\r\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\r\n\r\nexport const ShoppingCartModal = (props) => (\r\n  <div>\r\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\r\n  </div>\r\n);\r\n```\r\n\r\nThe when we track a given promise we can choose the area that would be impacted.\r\n\r\n```diff\r\n+ import { trackPromise} from 'react-promise-tracker';\r\n...\r\n+ trackPromise(\r\n    fetchSelectedProducts();\r\n+ ,'shopping-cart-area');\r\n```\r\n\r\n## Sample with delay:\r\n\r\nYou can add as well a delay to display the spinner, When is this useful? if your users are connected on\r\nhigh speed connections it would be worth to show the spinner right after 500 Ms (checking that the\r\najax request hasn't been completed), this will avoid having undesired screen flickering on high speed\r\nconnection scenarios.\r\n\r\n```diff\r\nexport const Spinner = (props) => {\r\n+  const { promiseInProgress } = usePromiseTracker({delay: 500});\r\n```\r\n\r\n# Demos\r\n\r\nFull examples:\r\n\r\n- [00 Basic Example](https://codesandbox.io/s/wy04jpmly7): minimum sample to get started.\r\n\r\n- [01 Example Areas](https://codesandbox.io/s/wy04jpmly7): defining more than one spinner to be displayed in separate screen areas.\r\n\r\n- [02 Example Delay](https://codesandbox.io/s/kwrrjjyjm5): displaying the spinner after some miliseconds delay (useful when your users havbe high speed connections).\r\n\r\n- [03 Example Hoc](https://codesandbox.io/s/j2jjrk4ply): using legacy high order component approach (useful if your spinner is a class based component)\r\n\r\n- [04 Initial load](https://codesandbox.io/s/j2jjrk4ply): launching ajax request just on application startup before the spinner is being mounted.\r\n\r\n- [05 Typescript](https://codesandbox.io/s/5ww39l90yp): full sample using typescript (using library embedded typings).\r\n\r\n\r\n# About Basefactor + Lemoncode\r\n\r\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\r\n\r\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\r\n\r\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\r\n\r\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\r\n","readmeFilename":"readme.md","_id":"react-promise-tracker@2.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-gudVtFtghYGGrqZkhIY1w80rZgs2M9J/EqukDh+1HeuCH0Ztp8RaFJN6/vWHN/i4JuoedkMwObH3PIBsH24KTQ==","shasum":"5add0ab5c5e8f743892a6b16cbbe290e20eecf04","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.1.tgz","fileCount":19,"unpackedSize":46071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyGv1CRA9TVsSAnZWagAAXjkP/0Xfjbx5YTeARg2gBq8z\nzi5cnPaitvYwfWvNl3XQBbTcfuOAoxaDz8mI2lyNE3ADew6j5LIRvv5Km/Ge\nmTzVPlVcmR3DXiT4iAVuB0Xg8IL7UHxD5tkV7Yie6rL5NoPeXo7NN48CepQu\nbbB7X1go6ilyVSyvYJzzj8Rly7xuTe/TvCMqu39yobnuvp7ue3kc3rDv1FSo\nirRze+y358GYIT9H2MJsAbnP85oaPUEPi1OKy+aAjzl1NeOKd83ZphFd6qBK\nMCfvfOWFaHcDNHs2j5k359uTSGYyXJlYTmhw5W8cgLT/cc9SofTg6tO0ASi0\nTo8BBiCjItdfF6fZmwVhie0pjuwdXWed46niKsQKPzfhFtUwc61yRI/NVe4g\nyhy48RbXBWk/jymEF42v/0cNP1/XUNPwV0gjbbMu2lUZIY6Yx7xxzMJ6pDYi\niY0O6pPIHbaWgFAAyzXKvlR5Ls5+bm3agwK+5iMOI05uUC71GwhVTVvTQWE0\n9DvSw/P7Ob3iFBPu2kgkZrqqXCktf5wwsr3VnKXKfhlnusDugG/19NTKb0AP\nxdHpjXsaq2T0wAWGUu9+vs9LR5GD4AhjYt0fQQKC1RqfothXGBCF7rXiBmzO\nfSXrd8+olgsOSJVunHnQfwjSgwtSMoXVXzq0LwN34ogwApHfSoGs8CWvokI+\nn6pn\r\n=N3o2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdSuAUeJ1+s4uKBNlRRlrDGKGaNPPi+LDCXwPEzV6R2gIhANWu87ON2Og8VI1k2dwBrNRpJVppfkrlHWdL6q0QqALr"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.1_1556638708128_0.4781231188583881"},"_hasShrinkwrap":false},"2.0.2":{"name":"react-promise-tracker","version":"2.0.2","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-0I2/wGLlYfC/mJrzLSHFnnS0uogwqJn/eN4QLCPjRxJ2YXh0vLU+TmV3JurQUdxbm6CLywY8STgskuUQgW1e3A==","shasum":"aa4d2679893e5009af9142dde24b39b2db308d7c","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.2.tgz","fileCount":19,"unpackedSize":46071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyG+GCRA9TVsSAnZWagAAQE8P/iT/pWkUunpPC9GFrdiw\nkqwLl2TxyrWnmVoMIVEElc0f+jDQiPMDBGspARqw6VxPyC+q2lJ6TN/UTNfi\n/25lfuftQA0ojRITm5cTVlWJCPypCs9x46T6fXDpkpsnaRdhRXZ9uX/MIrJU\nFjGX341W1XXjQTezViHrH0AtvdoLzrWS771pNxCso40XBVdEPzD1ENjkMDX8\ncQZL8BGj9q43km8HkuFjtJ5zHfmobM16WAr3ALqyIK5j+UeiC05Je5Hu8j/k\nTrfmmKD1zRhoVeGi5h1WNCw3KUh0lwAvpJ69BswuXXvUEX9hZsKYD3vT0V98\nLtDZL7ws7S2tWToF0bg+Ey+L6c0BPNXmc5UaW2ccw90jCEOsoRdngbySXUDX\n4lprqJftYLvl807RAGXHIyM/uWmCx4BjnSdltUTqS6XJl9Oa7XY6kdvWyymT\ntdtvC0RAkrSLkZLkMHq2JxWnNRJfDJLEfR1Pi1u3PZ9uKN7QzAxq9Gn48xji\nVtp2pnzt8JfvPgEqNZgmLXVLbyQv+V+v95+P71mkR1goMjFhPNGih3b2QK9M\nqvDxBqanfB2K65YYBjbMakjHuZiHHKVKH/MXUR3sAf4MU2NvkJpsgnLeYvU8\nfXRYjV9dUhr57G3cAMR1Pfu12Vrwf8zvYWHOBQRbpeoQDMeX7v7+fMRr7XaI\nnYlA\r\n=kwsY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa18faFgYa1A5bEZIXlhPxirfLIfiiD9kTP0cehqkVWgIhALEq4C9L4u28vfpsyIpu5r6kz+DYXdd1Myt7VM3r0c7e"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.2_1556639622150_0.39337605896648764"},"_hasShrinkwrap":false},"2.0.3":{"name":"react-promise-tracker","version":"2.0.3","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.0.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-zVUn4pqBK6OR4GWPGBYT+TmYvxa0vmRSqYVKWmxLZ8JUCvPDE1qZaODc4oV2tAoxBtmgzwp6sdLb6Ynys3yyBA==","shasum":"26aeb9a8cbd245ccbd4ecac8f851787fe99f6cf0","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.3.tgz","fileCount":19,"unpackedSize":46398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2+rSCRA9TVsSAnZWagAAULwP+wUV2H2ATn7urNEdW1Ml\nTrRY+o8uK3O2a5CQTWk3Fyp6f0OaUFIOQ66OLoVrrMMIhfPEr8FESASmpcPS\niI/7lqY4cqJ1aPvRMI7phHWUDcTupUD8cguwRYNpQDhT9qiYfOy+mfRDZwvc\nEDTCC9LtbVlPjwlKkxh/+HtQyLg28BqDaiWcdNGD1RNQRuQfkjTJ6Q6Pvt+d\n7RsoOGOxzcFPCW/Iv4Ipnam7u+JVamRrzZiVt8Ng+kA/vFty4XcsIz1W4W6w\n5L1pWSkCcjtwPnK5GNsjEd56M5D2WfEW2AGz09DZNdJ7huPwKBoILETfb/1l\nKYeBTo/RWnxf23Woorvro9sUmAx8K2rAdgiBVg9QRYTz998o+mDGGoeKB+Ue\npg7neS6r0S99mCzK+VjsFYpdBdflkhUe8QCi/TbGzKSf0nKJNPdQnOl2Rh/j\nO6uAPbzVMNSm2w3J7UM7Ns/3+cGPQ9N+CanMSigS1uR5wm/loB2NqVwYgoPr\nKihcnhDsKBsFem9Sr1LA7MS3dNgaUZBsNN7gbXtzCaZgOVkSV7QCvDcYuDHF\nWcJVP//BQ1eVM0fOv1Nbsrt0S23OnHgnWnMZObfzb56duwOYx4f7KnxKZqir\neEmgjJPsyox+zcohaml9cpXvc99WTqZTxfgZSeLGSWLId660/WvWRSGTRubb\n3BCY\r\n=jWFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoY6kcdUjVFK1KfeklwxjrdeXOU+cVGJDqrLns56pb5AiEA2fKudRdNdLXlsGC8R13d908FcEw072v+e7DOOf9FZ1A="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.3_1557916369625_0.185607719883516"},"_hasShrinkwrap":false},"2.0.4-beta.0":{"name":"react-promise-tracker","version":"2.0.4-beta.0","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"readme":"[![Build Status](https://travis-ci.org/Lemoncode/react-promise-tracker.svg?branch=master)](https://travis-ci.org/Lemoncode/react-promise-tracker)\n\n# react-promise-tracker\n\nSimple 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).\n\nFor detailed information check out the [project site](https://lemoncode.github.io/react-promise-tracker/)\n\n# Why do I need this?\n\nSometimes we need to track blocking promises (e.g. fetch or axios http calls), and control whether to\ndisplay a loading spinner indicator not, you have to take care of scenarios like:\n  - You could need to track several ajax calls being performed in parallel.\n  - Some of them you want to be tracked some others to be executed silently in background.\n  - You may want to have several spinners blocking only certain areas of the screen.\n  - For high speed connection you may wat to show the loading spinner after an small delay of time\n  to avoid having a flickering effect in your screen.\n\nThis library implements:\n  - A simple function that will allow a promise to be tracked.\n  - 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).\n\n# Installation\n\n```cmd\nnpm install react-promise-tracker --save\n```\n\n# Usage\n\nWhenever you want a promise to be tracked, just wrap it like in the code below:\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n//...\n\n+ trackPromise(\n    fetchUsers(); // You function that returns a promise\n+ );\n```\n\nThen you only need to create a spinner component and make use of the _usePromiseTracker_, this\nhook will expose a boolean property that will let us decide whether to show or hide the loading\nspinner.\n\n## Basic sample:\n\n```diff\nimport React, { Component } from 'react';\n+ import { usePromiseTracker } from \"react-promise-tracker\";\n\nexport const LoadingSpinerComponent = (props) => {\n+ const { promiseInProgress } = usePromiseTracker();\n\n  return (\n    <div>\n    {\n+      (promiseInProgress === true) ?\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\n      :\n        null\n    }\n  </div>\n  )\n};\n```\n\n- To add a cool spinner component you can make use of _react-spinners_:\n\n  - [Demo page](http://www.davidhu.io/react-spinners/)\n  - [Github page](https://github.com/davidhu2000/react-spinners)\n\n\n- Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const AppComponent = (props) => (\n  <div>\n    <h1>Hello App!</h1>\n+   <LoadingSpinnerComponent />\n  </div>\n);\n```\n\n## Sample with areas:\n\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\n\n![Shopping cart sample](/resources/00-shopping-cart-sample.png)\n\nThe _promiseTracker_ hooks exposes a config parameter, here we can define the area that we want to setup\n(by default o area). We could just feed the area in the props of the common spinner we have created\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({area: props.area});\n\n  return (\n    promiseInProgress && (\n      <div className=\"spinner\">\n        <Loader type=\"ThreeDots\" color=\"#2BAD60\" height=\"100\" width=\"100\" />\n      </div>\n    )\n  );\n};\n```\n\nWe could add the `default-area` to show product list spinner (no params means just default area):\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ProductListComponent = (props) => (\n  <div>\n    ...\n+   <LoadingSpinnerComponent /> // default-area\n  </div>\n);\n```\n\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ShoppingCartModal = (props) => (\n  <div>\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\n  </div>\n);\n```\n\nThe when we track a given promise we can choose the area that would be impacted.\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n...\n+ trackPromise(\n    fetchSelectedProducts();\n+ ,'shopping-cart-area');\n```\n\n## Sample with delay:\n\nYou can add as well a delay to display the spinner, When is this useful? if your users are connected on\nhigh speed connections it would be worth to show the spinner right after 500 Ms (checking that the\najax request hasn't been completed), this will avoid having undesired screen flickering on high speed\nconnection scenarios.\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({delay: 500});\n```\n\n# Demos\n\nFull examples:\n\n- [00 Basic Example](https://codesandbox.io/s/wy04jpmly7): minimum sample to get started.\n\n- [01 Example Areas](https://codesandbox.io/s/wy04jpmly7): defining more than one spinner to be displayed in separate screen areas.\n\n- [02 Example Delay](https://codesandbox.io/s/kwrrjjyjm5): displaying the spinner after some miliseconds delay (useful when your users havbe high speed connections).\n\n- [03 Example Hoc](https://codesandbox.io/s/j2jjrk4ply): using legacy high order component approach (useful if your spinner is a class based component)\n\n- [04 Initial load](https://codesandbox.io/s/j2jjrk4ply): launching ajax request just on application startup before the spinner is being mounted.\n\n- [05 Typescript](https://codesandbox.io/s/5ww39l90yp): full sample using typescript (using library embedded typings).\n\n- [06 Suspense Like](https://codesandbox.io/s/6w1oly0x9r): sample implementing a suspense-like component (typescript).\n\n- [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).\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","readmeFilename":"readme.md","_id":"react-promise-tracker@2.0.4-beta.0","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-RGIwpy+uIbM5uAR/VdEHFWIo8Wv3FU+Y+8RhojNjH7Wc5BQLlXVteQ0XRL/c7PnKVQK9jwVoiKyoXTA7fT5opw==","shasum":"e157d35d28d76e3edf4ecfcec00d205b6a3c206e","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.4-beta.0.tgz","fileCount":19,"unpackedSize":46453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOKPCCRA9TVsSAnZWagAAzhUP/jpPostTfbH0ltcMT0mB\nT0NjCCdRoKw+fCdCyt7MtLYj83uRJdVDfjM8tt0xXA9lSu+8dPDGrJmQP1rp\n1+XqvBrX6NSlTkgWI5Jazq3Db+MEiGy5q/lvHFjIVGEFL+7emdRbZmgByrPf\nLm0OsKFQ0loUNvox4JKN4mipczDYaGi7dDVcW9R8zurM2+C8i1mr0HPBhrnx\nfEGetOK3zP+H7UixvzMEsU0JRIRb3+7nZ5uq+4tBFxJH2t/fL/h409/g/SHZ\nXKbYJK9gb34ZZ0bQ/xtju8NG4oWrOd6lWSh9Ij/E+/IpGb1Y5570CCd4b8V1\nsToiUR8UBGuFhzsux6XJrR5m/hxpkdisJp6l24wBwL783prZuUOEkoa6pYio\nIY2uPEeworetcZAb8Fe91gKc5Effxr9+cvxMwPDWJxvxzfo5aq7g3ynx5GzO\nYGkDtBWhuljuV3kK0LU+gqpW3CqHwmqIFA+rcfkpZLB7fVnSuynFsseaA+47\n6+d86UgWbxAUNmkIvWL9gzpLhBCAvIiKV6cSadzD7Q2TshhFx46lmFWy+PFb\nRoA5zL0tkm9ZSb6uKlN3eN06KjM/Ju2vSjRTo4XphMIRNKV9eFhSCpaSgO3m\nGD67pbHzZU3wWv2CtzAA88aP13NoelIn6jXyOyRKN5AuQA9o68IoKp69VTzX\nZ8XD\r\n=Uxlu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDfH5tfM1dFpE0f550qRt0/0mRykn9jzf8SPh24rldGgIhAKcugsNZPMUGmC2OTiQDecMG08LZbFzEO3WP6Ek3xfrt"}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.4-beta.0_1563993025211_0.6526926733831129"},"_hasShrinkwrap":false},"2.0.4":{"name":"react-promise-tracker","version":"2.0.4","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.0.4","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-G/8X/sN0miBEcX+7u8JwSQRh+FYfOaikjKQBLDiGR381Wl6keTA5Ld4ZoaA1gK/pw3w/i1Rr39Ps4C1hEffY3Q==","shasum":"52c2a7b9d87dbd726e600f1968eae2f48abb62df","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.4.tgz","fileCount":19,"unpackedSize":46446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOKasCRA9TVsSAnZWagAAPfcQAJXCLRtEr+0/meIDsUdu\nQBHBAPzsyoitywvy2/56ufQwqXed4LlgCp7V0t4QryeF2942ymZZLuKUF4ht\n0GNMlMY3IgGDV3YD1Zsp9yTG15ttCiyTEsafcZm7L8S45r+tTYZ9jzJTUl0j\nj/4SzlmOakC7aWTm3JdmXD/6Tbg2qQ3n02TZSOPpJOoHSnFBLAK780eNUrN0\nPByLZf+WblRomOHgyOQ87xT2gmh/0BRBNwtvssE/1I6KLmBj7m1+mY3a4X7V\n2thTrfX27l1LBO07356eh9/a7CpCpebNCSpp6bIwzqEhpsMa0zb2jr1O5zTb\nORs0i1qWIfd8lO/ULahFBgTipw5D64z6fgDrgZmm5fTW/rMPSedd9grjbHEL\n+GAKTvOpaWOOR5Pw+UzJAFlqQlUdeCDX2U5HD8+y5DqWhUSYaQUZ8yK8ivmS\nzuarLbfY/O4cZJNVmQoUXJ4Q0SfRZ/VidWoK05yVv+YQRXoGWJLuHgXa0XEH\n7PyrI003/BV8fmAu09bURcURzazcs0+YWy//PqNxuFwWSar4z6o9ADlxGfLP\nYKjG/Yc8rydOQ3+u8mQQyRPXzsnB0HZf3v1Fsldi9sgi3PYJWi4IuR111JGM\nUQ2KbLINyLj7amrj3QnFsHYPPfzy2f1qWFdfZxFwIG0Ys9LOX5o+0Ebo0FE1\nYQCk\r\n=3lW7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFA7S46uoZPiIdZ1iuIKvdGWp8OMrVmvu9D5G13TN6SwIgYHqtmvz/4urIwjM5HoHoiaT9WTJVxv1SnNva9TitXBY="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.4_1563993771286_0.3466158921759439"},"_hasShrinkwrap":false},"2.0.5":{"name":"react-promise-tracker","version":"2.0.5","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm run release:prepare && npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.0.5","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"dist":{"integrity":"sha512-86k2vXybbBFMRpSCaQUCd4JVL7jXUhmqFer0X4zv6P8Bht4+xfqPOTU/brr5IzbbKQrNCr0EEJ8RuYTqH0sj8A==","shasum":"01b7cb2819f530ed829232e717c78bf77d39e4bb","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.5.tgz","fileCount":19,"unpackedSize":46630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdURaNCRA9TVsSAnZWagAAcBgP/2B58i4eqdFqPFfkTRPm\n8rCu2Fxju+3Tj7hqoui8HFgZT1bI7Ka5Mw4/sdtPJdP6FWGVwLOzFcpq+mkZ\nLixvrGWVo9yBau+zZ7eaz8odpW4uh54w70pzgHE5YZTNh0mJuQ1GC07dt6gC\ngTP3W+9tGEUdaMhwPrgJFORU5wKMe43Z9LL2Kt6eAcvgklsycwIs7Ha8L5iO\nnRdtiNyFlMyDh/7Lyi16AynvHH2eBVWccIrB7ozXvAp3nbGaADsBPjumFSZT\nV5xUasA7ItF8LbXewEnodaQdpuHC4bnn/HAajqX4fhZnKfqR8sG0IOrINzpO\nv2SJiTqXaZ5D03oEIZ6HQNOsBMNYpJtH1N3iDh5DqAt/zBUMKgPTttexmTIN\nfoYBKQ0+eP9sVY8CWG82k0jap4K1wkKW3o5D0OmqBhKee3jQRxy7YC6MD3Cp\nP8K2nznXMKNT78s31xF8CEjgZ/Hf+wHe8xa44SnJwnTAkFXp4yStA9BENqrY\nAAP+tEyamDSf6gh8XJz65J8JAz2aAVuctcbZANaAusLkKBtMAb4e8axnupvx\nJH75P336XvuZpgp6lVqvLljX2tAuNUBoWUWoyKlKnFMZCWnVI5VC3NzZOplR\nJUr4J5bYywJ1C4kZ1jEFbyyQm0DWjMn7DxZskEdEGgT1A+3KiBPuZ2e3Q6G/\nm7P9\r\n=VNry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyv2XETInctWznSOrPlsbm/4WeOa8V4GsCLo3tfVbeKAiEAsQFJCKlbDLbyZRyOEjYFvpwgC5VxIgSAc+SYnKAisSc="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.5_1565595277253_0.28689424294709176"},"_hasShrinkwrap":false},"2.0.6":{"name":"react-promise-tracker","version":"2.0.6","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm run release:prepare && npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.0.6","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-OvkP9+zrANKBu5NcqXmJTyoJ7ZdyVyXhSHE/KzGoQecBqpXXtNd9GN7qWlQdDhP0S2pgmIhpNLvAI8wcErFDIw==","shasum":"301a90f77b7a640c518e0e39fa2a2146d8217f5e","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.0.6.tgz","fileCount":19,"unpackedSize":47944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUPamCRA9TVsSAnZWagAAhKcP/i05WW70pQuxjYn0lO6n\nJIE8SXIlPGlBgdp1lwRWrRj5Ze51vbIYTnjy+iISXyTgmW5E7gKidsGlpN9f\nU67vBFI2jW8muMOUqo4PuFldmyYkZDY0WKYRQWNurHEYZLsonZH9Q3OAMID5\nYoaDYTUnxg5RBE2zAmyAqCB6K+ejPQ8pcO0HNlmBId/ppdKRR3NfjLZQxGVJ\ns6kRz/Qqdx+HQEgB9Ca3i09Vr6Iuu5o7qTk3gvj5D5TP0iMWx+Vqh5eD/meF\npX9f/MXX1i9pl9HctG0gScugujV8H2S9WvcnJd4DODc4eN1iJiRitx/WtDdo\nfeZzqWYNn37xx3HpKHAGV99nr12Bpz093WFPpmWw9RzEOLEbpjTqrj1a0kem\n0abrekPchtCJXCG7Glu4HEKcEDoMfoMrbn4hXJXGKEpVhj1q2N2sm+Ok8awD\nGexLf7m+YKdkdysLIERVQ/xOjbXijeDVWnC7+wEma0mnZOm3V3D5c+bSZiCl\nm1fjibEtnBODPaeQ9m/nRcu7eK9KzritwIRPxryRAKz2/3CT3ZBwcAQdqC6A\n4wlbqOkUDDED8saCosAf/yu8bHW60RrK6+PSQobYHoZWic1R04dTfYd7R+/+\nCdtNbkghJjIJcDC3X5erwSJd2ui83bmPnV4qv24Wpy5YuSJZCaNJ/hZX3LfN\nYq+7\r\n=p9A1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmHEz3/uNRNMmPbI4T6+xJhpTN+zWuT30QV7hYSDnw4AiEAnwLWSV1kPH2QFFo+0kts5bW64ruHh9l1J1euVd6BgMY="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.0.6_1582364325942_0.3534125973360953"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-promise-tracker","version":"2.1.0","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack -p --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest","test:watch":"cross-env NODE_ENV=test jest --watchAll","release:prepare":"npm run clean && npm run test && npm run build && rimraf build/dist/report","release":"npm run release:prepare && npm publish ./build","release-beta":"npm run release:prepare && npm publish ./build --tag beta"},"peerDependencies":{"react":">=16.8.0"},"dependencies":{},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@babel/register":"^7.0.0","babel-loader":"^8.0.5","compression-webpack-plugin":"^2.0.0","copyfiles":"^2.1.0","cross-env":"^5.2.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.11.2","enzyme-to-json":"^3.3.5","jest":"^24.5.0","raf":"^3.4.1","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.3","webpack":"^4.29.6","webpack-bundle-analyzer":"^3.1.0","webpack-cli":"^3.3.0","webpack-merge":"^4.2.1"},"jest":{"setupFiles":["./config/test/polyfills.js","./config/test/setupJest.js"],"snapshotSerializers":["enzyme-to-json/serializer"],"restoreMocks":true,"testPathIgnorePatterns":["/node_modules/"]},"_id":"react-promise-tracker@2.1.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1LQSGAnFF4o++iPFgeBrMpS+ZHQg8ZGl9Zuf70v+OoLxuOnUeLCP7ugma+InBCUZzPnSLyWTLt/jyW+FAy5ELQ==","shasum":"a8ac2ca5322ca60f83fa7a00ad9d99bfbbdb8434","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.1.0.tgz","fileCount":19,"unpackedSize":51534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXQp8CRA9TVsSAnZWagAAV2QQAKJvdNxzWAT/HmFphqoV\nW9X5u6DL5jn3gRXYdldkILquBYX6ZJPmsM66m6z/1WBiFoFnxuyI8GoheJgG\nuBFyqGP1L+hJlrX4vVphL+PvJ17ybcIagCUmlHzFtwKj/BRBKw2RxA61deMC\ntlBlZV13JkHjUKWbJ5kPcSOkMHKzOCaadZgXA34Y1oxvME8CkNmc5zQTnjOz\ngDA9R1ZicTniv1huHD0ln9kvLsPeVXM8y5L3Cv2yGMpQ8ExrkTw3JfU/4Fkc\nAlaxsKPdmtgCmusrpxwqeUgF1IkSZ/nZX0PARaCUm/pGqXnTnJ2RNH6hhRNY\nZ4dnaPCCtwpcnfff9IWUjbbFETEqeuuCde5rg0uxzZ2YhW0hgxWMpkdMsHI1\n/j5MBh956DgjQvM6HSvulQhspXJ/SbDA4LX9UynPKG09DEUuEP0P8oSHYhJa\nHOast++7mpuPgMsOqKNoGiTYLTpcR2FR43efMAz1lugB7fPy9mm4LHf7fZst\nsM8H0pqdJuZAw84oWJ9F369dQc5UEAcEV25nCpRyFfCLaKKeYLHs0wBBa2Fz\nrXzMrFTs3SKSgwEBg+lPk1AEZraXidD4+HfeAXMQjq06usve0Krntkn43Omm\nJtGjlseOrGxRrm4IK9TjopubGq1uU9BZbqcqpBPZw+lpz1JPmimNKJJ/KnIV\nzOl2\r\n=g+ga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKNuDrbAypI0S56pGqlEIWEuerLsJ0o/t6l8yuudwr8gIgMCEj3Wj2Nxf4efpLXt/bs8lZW44bh2raOGwVYwMsDf8="}]},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.1.0_1583155836133_0.47419957519119116"},"_hasShrinkwrap":false},"2.1.1-beta.0":{"name":"react-promise-tracker","version":"2.1.1-beta.0","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest -c ./config/test/jest.js","test:watch":"npm run test -- --watchAll -i"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/cli":"^7.19.3","@babel/core":"^7.19.6","@babel/preset-env":"^7.19.4","@babel/preset-react":"^7.18.6","@babel/register":"^7.18.9","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^14.4.3","babel-loader":"^9.0.1","compression-webpack-plugin":"^10.0.0","copyfiles":"^2.4.1","cross-env":"^7.0.3","jest":"^29.2.2","jest-environment-jsdom":"^29.2.2","react":"^18.2.0","react-dom":"^18.2.0","regenerator-runtime":"^0.13.10","rimraf":"^3.0.2","webpack":"^5.74.0","webpack-bundle-analyzer":"^4.7.0","webpack-cli":"^4.10.0","webpack-merge":"^5.8.0"},"gitHead":"3036aab3078cf6203344f5b33a877b03360225be","readme":"[![Build Status](https://travis-ci.org/Lemoncode/react-promise-tracker.svg?branch=master)](https://travis-ci.org/Lemoncode/react-promise-tracker)\n\n# react-promise-tracker\n\nSimple 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).\n\nFor detailed information check out the [documentation](https://lemoncode.github.io/react-promise-tracker/)\n\n# Why do I need this?\n\nSometimes we need to track blocking promises (e.g. fetch or axios http calls), and control whether to\ndisplay a loading spinner indicator not, you have to take care of scenarios like:\n\n- You could need to track several ajax calls being performed in parallel.\n- Some of them you want to be tracked some others to be executed silently in background.\n- You may want to have several spinners blocking only certain areas of the screen.\n- For high speed connection you may want to show the loading spinner after an small delay of time\n  to avoid having a flickering effect in your screen.\n\nThis library implements:\n\n- A simple function that will allow a promise to be tracked.\n- 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).\n\n# Installation\n\n```cmd\nnpm install react-promise-tracker --save\n```\n\n# Usage\n\nWhenever you want a promise to be tracked, just wrap it like in the code below:\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n//...\n\n+ trackPromise(\n    fetchUsers(); // You function that returns a promise\n+ );\n```\n\nThen you only need to create a spinner component and make use of the _usePromiseTracker_, this\nhook will expose a boolean property that will let us decide whether to show or hide the loading\nspinner.\n\n## Basic sample:\n\n```diff\nimport React, { Component } from 'react';\n+ import { usePromiseTracker } from \"react-promise-tracker\";\n\nexport const LoadingSpinerComponent = (props) => {\n+ const { promiseInProgress } = usePromiseTracker();\n\n  return (\n    <div>\n    {\n+      (promiseInProgress === true) ?\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\n      :\n        null\n    }\n  </div>\n  )\n};\n```\n\n- To add a cool spinner component you can make use of _react-spinners_:\n\n  - [Demo page](http://www.davidhu.io/react-spinners/)\n  - [Github page](https://github.com/davidhu2000/react-spinners)\n\n* Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const AppComponent = (props) => (\n  <div>\n    <h1>Hello App!</h1>\n+   <LoadingSpinnerComponent />\n  </div>\n);\n```\n\n## Sample with areas:\n\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\n\n![Shopping cart sample](/resources/00-shopping-cart-sample.png)\n\nThe _promiseTracker_ hooks exposes a config parameter, here we can define the area that we want to setup\n(by default o area). We could just feed the area in the props of the common spinner we have created\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({area: props.area});\n\n  return (\n    promiseInProgress && (\n      <div className=\"spinner\">\n        <Loader type=\"ThreeDots\" color=\"#2BAD60\" height=\"100\" width=\"100\" />\n      </div>\n    )\n  );\n};\n```\n\nWe could add the `default-area` to show product list spinner (no params means just default area):\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ProductListComponent = (props) => (\n  <div>\n    ...\n+   <LoadingSpinnerComponent /> // default-area\n  </div>\n);\n```\n\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ShoppingCartModal = (props) => (\n  <div>\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\n  </div>\n);\n```\n\nThe when we track a given promise we can choose the area that would be impacted.\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n...\n+ trackPromise(\n    fetchSelectedProducts();\n+ ,'shopping-cart-area');\n```\n\n## Sample with delay:\n\nYou can add as well a delay to display the spinner, When is this useful? if your users are connected on\nhigh speed connections it would be worth to show the spinner right after 500 Ms (checking that the\najax request hasn't been completed), this will avoid having undesired screen flickering on high speed\nconnection scenarios.\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({delay: 500});\n```\n\n# Demos\n\nFull examples:\n\n- [00 Basic Example](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/00-example-basic): minimum sample to get started.\n\n- [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.\n\n- [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).\n\n- [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)\n\n- [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.\n\n- [05 Typescript](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/05-typescript): full sample using typescript (using library embedded typings).\n\n- [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).\n\n- [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).\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","readmeFilename":"readme.md","_id":"react-promise-tracker@2.1.1-beta.0","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-O6166HEDp5XYaLJeDFyHgTx2XEeXh2b65iFZ39E6U2dd+J5Y/sIzHdurnx8vnV/WmOzipdlMG5ulZ26VFZu1MQ==","shasum":"96dce8bc1df7ce11da21cd9e03ea126144d6b76b","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.1.1-beta.0.tgz","fileCount":20,"unpackedSize":352347,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWGqxn1vFje6x0Kstvv7i+KkLrqlLYtQ7k0StO/XJ6KAiBB/fiAPQajrxlD8yMwpqo0T98PVDlpNMoMuUJLw32b7Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZNAeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJXg/+JsZAG7KxLhxeXj3mA5hkspp5tagaLl7GAoD/1+MKGcJbn/Sg\r\n7gfuFo4Dy24UKdybs7K/hq3ZKoGGFaZpDGphcVkW8PVEhZe4Y+bjE6XMQPps\r\naKxbqvEMTDEkkNR6VTr49O5/+Kmx+gXFfcsCDdTHSpU8hZCFQPosspRap6/R\r\nGel4ptmhWAPMsqKv1DEMRrTdJ1npdICBMZdYHAVtXgR9GVgmjfSp+4y/8S1D\r\nI6gPM+3LDYTqq985LtQ/tlWT4VzHcGpJXx8bj2sAGPkQ6dNPdXEWdL6NCiaG\r\ngXlI1OLn/B6+6FXpSQkHay5dl1ME3tQOUD0w1L3m0yXiuzpOSSZQIC+jNUms\r\nDOTifsKgGVeEtewPxpHvTDzeLJ6ycMCVM3id07sPrLIxITERWeUVJzitzTk2\r\nIGKbAZOIj6aWaWjUO96QhZ60MxMaBtkON+A5u3Tu/3pIl3WR5qi2fnR/d4c3\r\nRfSSZc4+8VgmUCdXFXXQUTmpcaHIixvdk2QzjpIdKNP35pExOt9BlgOwniLW\r\n/WD5xiuZZZGY5+bWzOH+K4ummeLFD96OWvuqMKgNhqaAvnvmrkAtzGFFKNPH\r\nAj6EcVkAaLWwbP3RPD3knCH8jZ6C25TIiMjvYMhR8UBEplwMxEp1VoQTFIMl\r\nA2IWT5d6JOrIw91ljITrgLhhnZ9Ygr5X3kQ=\r\n=SqfX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.1.1-beta.0_1667551262536_0.9391202084876134"},"_hasShrinkwrap":false},"2.1.1":{"name":"react-promise-tracker","version":"2.1.1","description":"Simple React Promise tracker Hook/HOC helper to add loading spinner indicators","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","author":{"name":"Lemoncode"},"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}],"browser":"lib/index.js","main":"lib/index.js","types":"index.d.ts","module":"es/index.js","jsnext:main":"es/index.js","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"scripts":{"clean":"rimraf build/*","build":"npm run clean && npm run build:lib && npm run build:es && npm run build:dist:prod && npm run build:copy","build:lib":"cross-env BABEL_ENV=es5_cjs babel src --out-dir build/lib --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:es":"cross-env BABEL_ENV=es babel src --out-dir build/es --ignore 'src/**/*.spec.js,src/**/*.test.js'","build:dist:prod":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.prod.js","build:dist:dev":"cross-env BABEL_ENV=umd webpack --config ./config/webpack/webpack.dev.js","build:copy":"copyfiles package.json readme.md LICENSE.txt build && copyfiles \"./src/**/*.d.ts\" -u 1 build","test":"cross-env NODE_ENV=test jest -c ./config/test/jest.js","test:watch":"npm run test -- --watchAll -i"},"peerDependencies":{"react":">=16.8.0"},"devDependencies":{"@babel/cli":"^7.19.3","@babel/core":"^7.19.6","@babel/preset-env":"^7.19.4","@babel/preset-react":"^7.18.6","@babel/register":"^7.18.9","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^14.4.3","babel-loader":"^9.0.1","compression-webpack-plugin":"^10.0.0","copyfiles":"^2.4.1","cross-env":"^7.0.3","jest":"^29.2.2","jest-environment-jsdom":"^29.2.2","react":"^18.2.0","react-dom":"^18.2.0","regenerator-runtime":"^0.13.10","rimraf":"^3.0.2","webpack":"^5.74.0","webpack-bundle-analyzer":"^4.7.0","webpack-cli":"^4.10.0","webpack-merge":"^5.8.0"},"gitHead":"dec2435b2c97d93b2f4981a9673e1cbe80c0ec02","_id":"react-promise-tracker@2.1.1","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-NM7FrJ4y5aRN3FIeVtmeF8leIDQIdYni9pleHTvuX6Kz5zsIHMYSNERmvzTxvPuzei0iNiNiudsXySP63TXA8A==","shasum":"d5343a020b1fd7b42382ac881d95810774391ee3","tarball":"https://registry.npmjs.org/react-promise-tracker/-/react-promise-tracker-2.1.1.tgz","fileCount":20,"unpackedSize":352333,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEp6rQ7TQYbaZcvleVxoTI36nvXBtlzkNTfj6pVoEmIFAiAVgjVM+3xkoybF3mDF3+ThFs43rP1lOOpvcjaxVi6Gsw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZQBoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6pA/+Nnu/aQiO9gcj1UkQCQGXcMIw68EKJRYgL+jjX7zejOO/AxbB\r\nYP/50JX7PEYtiwRUw1b0X9GYBivkdB+SLnHU0fMXPKD6lS1WTWkvfs8Qhal6\r\nAlP5vL/lH//zAtbctSaBeN8Dhl14TGYAI8QpBc0qt0votoMgiECL4EEv49KI\r\nszz0QlzJ4AezabXL6YKbwj54hFiGsW3sCKTs642PpYZPgvOtlyOVkdpRm3Na\r\nrUtYMjnYfBx4EAuil9MhS7hIbJEcC78oTt1d4nPQjFhjMKeXcswhl1W+ct6d\r\n3CiLFuqmm54WSIMzwzAvW7ysZ0XTciFwNIBwXQJku0nO9ws0ohPpWsi97het\r\nrumA/hHY4B2hbPzmhGltI962zsPQ/6meuKdK7lW1ACvognR8tum8zKe8kyAR\r\nT5nwicuDKj/jRyQDgY89Ssp4HWYWZgdOBnG6oNwwdqicwRxrPOYpbbAyU07s\r\ntfq9O9kKc7w4jVCtGVieryR+gCjoc5Pa4BqMQE31d51cKVQkSXFd3dmHLLcy\r\nbm0uz4/xk6+r1bFLTnUEKtAIpvFJKaTgpDFWUBR7gnJRx7+4fcz3v5kSfprk\r\nXrsKO6H6nikjFSmIGN5Lc5DnLVw7sgcsTW65c7M4VOWXake4v8gaYlhwcrHf\r\nAprSbEHtZSFdBjq44W1RJB/WHa0tGKHiV70=\r\n=4uc2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"lemoncode","email":"braulio.diez@lemoncode.net"},"directories":{},"maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-tracker_2.1.1_1667563624086_0.0015097085948867495"},"_hasShrinkwrap":false}},"readme":"[![Build Status](https://travis-ci.org/Lemoncode/react-promise-tracker.svg?branch=master)](https://travis-ci.org/Lemoncode/react-promise-tracker)\n\n# react-promise-tracker\n\nSimple 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).\n\nFor detailed information check out the [documentation](https://lemoncode.github.io/react-promise-tracker/)\n\n# Why do I need this?\n\nSometimes we need to track blocking promises (e.g. fetch or axios http calls), and control whether to\ndisplay a loading spinner indicator not, you have to take care of scenarios like:\n\n- You could need to track several ajax calls being performed in parallel.\n- Some of them you want to be tracked some others to be executed silently in background.\n- You may want to have several spinners blocking only certain areas of the screen.\n- For high speed connection you may want to show the loading spinner after an small delay of time\n  to avoid having a flickering effect in your screen.\n\nThis library implements:\n\n- A simple function that will allow a promise to be tracked.\n- 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).\n\n# Installation\n\n```cmd\nnpm install react-promise-tracker --save\n```\n\n# Usage\n\nWhenever you want a promise to be tracked, just wrap it like in the code below:\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n//...\n\n+ trackPromise(\n    fetchUsers(); // You function that returns a promise\n+ );\n```\n\nThen you only need to create a spinner component and make use of the _usePromiseTracker_, this\nhook will expose a boolean property that will let us decide whether to show or hide the loading\nspinner.\n\n## Basic sample:\n\n```diff\nimport React, { Component } from 'react';\n+ import { usePromiseTracker } from \"react-promise-tracker\";\n\nexport const LoadingSpinerComponent = (props) => {\n+ const { promiseInProgress } = usePromiseTracker();\n\n  return (\n    <div>\n    {\n+      (promiseInProgress === true) ?\n        <h3>Hey I'm a spinner loader wannabe !!!</h3>\n      :\n        null\n    }\n  </div>\n  )\n};\n```\n\n- To add a cool spinner component you can make use of _react-spinners_:\n\n  - [Demo page](http://www.davidhu.io/react-spinners/)\n  - [Github page](https://github.com/davidhu2000/react-spinners)\n\n* Then in your application entry point (main / app / ...) just add this loading spinner to be displayed:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const AppComponent = (props) => (\n  <div>\n    <h1>Hello App!</h1>\n+   <LoadingSpinnerComponent />\n  </div>\n);\n```\n\n## Sample with areas:\n\nUsing react-promise-tracker as is will just display a single spinner in your page, there are cases where you want to display a given spinner only blocking certain area of the screen (e.g.: a product list app with a shopping cart section.\nWe would like to block the ui (show spinner) while is loading the product, but not the rest of the user interface, and the same thing with the shopping cart pop-up section.\n\n![Shopping cart sample](/resources/00-shopping-cart-sample.png)\n\nThe _promiseTracker_ hooks exposes a config parameter, here we can define the area that we want to setup\n(by default o area). We could just feed the area in the props of the common spinner we have created\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({area: props.area});\n\n  return (\n    promiseInProgress && (\n      <div className=\"spinner\">\n        <Loader type=\"ThreeDots\" color=\"#2BAD60\" height=\"100\" width=\"100\" />\n      </div>\n    )\n  );\n};\n```\n\nWe could add the `default-area` to show product list spinner (no params means just default area):\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ProductListComponent = (props) => (\n  <div>\n    ...\n+   <LoadingSpinnerComponent /> // default-area\n  </div>\n);\n```\n\nAnd we add the `shopping-cart-area` to show shopping cart spinner:\n\n```diff\nimport React from 'react';\n+ import { LoadingSpinnerComponent} from './loadingSpinner';\n\nexport const ShoppingCartModal = (props) => (\n  <div>\n+   <LoadingSpinnerComponent area=\"shopping-cart-area\" />\n  </div>\n);\n```\n\nThe when we track a given promise we can choose the area that would be impacted.\n\n```diff\n+ import { trackPromise} from 'react-promise-tracker';\n...\n+ trackPromise(\n    fetchSelectedProducts();\n+ ,'shopping-cart-area');\n```\n\n## Sample with delay:\n\nYou can add as well a delay to display the spinner, When is this useful? if your users are connected on\nhigh speed connections it would be worth to show the spinner right after 500 Ms (checking that the\najax request hasn't been completed), this will avoid having undesired screen flickering on high speed\nconnection scenarios.\n\n```diff\nexport const Spinner = (props) => {\n+  const { promiseInProgress } = usePromiseTracker({delay: 500});\n```\n\n# Demos\n\nFull examples:\n\n- [00 Basic Example](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/00-example-basic): minimum sample to get started.\n\n- [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.\n\n- [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).\n\n- [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)\n\n- [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.\n\n- [05 Typescript](https://codesandbox.io/s/github/lemoncode/react-promise-tracker/tree/master/examples/05-typescript): full sample using typescript (using library embedded typings).\n\n- [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).\n\n- [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).\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","maintainers":[{"name":"lemoncode","email":"braulio.diez@lemoncode.net"}],"time":{"modified":"2022-11-04T12:07:04.368Z","created":"2017-10-31T08:35:06.351Z","0.0.1":"2017-10-31T08:35:06.351Z","0.0.2":"2017-10-31T08:41:37.873Z","1.0.0":"2018-03-26T10:30:39.562Z","1.0.1":"2018-04-17T13:59:39.981Z","1.0.2":"2018-05-07T18:26:21.478Z","1.1.0":"2018-09-11T07:32:05.027Z","1.1.1":"2018-09-20T11:13:04.231Z","2.0.0-beta.1":"2019-04-08T08:10:25.337Z","2.0.0-beta.2":"2019-04-15T09:13:17.199Z","2.0.0":"2019-04-16T08:48:42.803Z","2.0.1":"2019-04-30T15:38:28.462Z","2.0.2":"2019-04-30T15:53:42.379Z","2.0.3":"2019-05-15T10:32:49.772Z","2.0.4-beta.0":"2019-07-24T18:30:25.357Z","2.0.4":"2019-07-24T18:42:51.453Z","2.0.5":"2019-08-12T07:34:37.377Z","2.0.6":"2020-02-22T09:38:46.091Z","2.1.0":"2020-03-02T13:30:36.293Z","2.1.1-beta.0":"2022-11-04T08:41:02.678Z","2.1.1":"2022-11-04T12:07:04.290Z"},"homepage":"https://github.com/Lemoncode/react-promise-tracker#readme","repository":{"type":"git","url":"git+https://github.com/Lemoncode/react-promise-tracker.git"},"author":{"name":"Lemoncode"},"bugs":{"url":"https://github.com/Lemoncode/react-promise-tracker/issues"},"license":"MIT","readmeFilename":"readme.md","keywords":["react","promise","tracker","track","hook","hoc","higher order component","spinner","component"],"contributors":[{"name":"Braulio Diez","email":"braulio.diez@lemoncode.net","url":"https://github.com/brauliodiez"},{"name":"Javier Calzado","email":"javi.calzado@lemoncode.net ","url":"https://github.com/fjcalzado"},{"name":"Daniel Sanchez","email":"daniel.sanchez@lemoncode.net","url":"https://github.com/nasdan"},{"name":"Alejandro Rosa","url":"https://github.com/arp82"}]}