react-flags
react-flags copied to clipboard
[Feature request] lazy loading
Hi and thanks for the module,
If this is still maintained, I have some good idea to share and maybe to implement
I have a react component that display an image of a flag, whenever I change the language, the flag change, and a new image get downloaded. This result in an image download and UI is not handling it properly.
This solution will preload all the resource images and store it to state:
class ImageLoader extends Component {
constructor() {
super();
this.data = {
data: null
};
}
componentDidMount() {
axios.get("http://url.to/my/RESTful/api").then(res => {
this.setState({ data: res.data });
});
}
render() {
return this.state.data
? <img
src={require(`../images/${this.state.data.picture}`)}
alt="some name"
/>
: null;
}
}
This is actually not possible using src props, `<Flags src="/test" /> will render the following:
<img alt="French Flag" src="/img/flags/flags-iso/flat/32/_unknown.png" class="sc-bdVaJa bnvcRn">