Simple loading placeholders are here to provide better user experience while a page is in its loading state.
Using NPM
npm install loading-placeholders
import React from 'react';
import Placeholders from 'loading-placeholder';
//This will make it more custom
function App() {
const loadingState = 0; //Can be network status
return (
{
loadingState !== 200 //If you're using network status
?
<Placeholders height="100px" width="80px" br="15px" n="10" margin="0.8rem" />
// 9 placeholders with the height of 100px, width of 80px and margin of 0.8rem
:
<Component/>
//Whatever is supposed to show
}
);
}
export default App;
height =The desired height in any unit
width = The desired width in any unit
br = The desired border radius
n = Number of desired placeholders (in whole numbers)
margin = The desired margin for each placeholder
- Built with plain React and CSS
No need to install extra dependencies
- Lightweight and slightly responsive
Since it is built with CSS, the loading time is next to zero
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.