React component to manipulate the favicon, as a loading or progress indicator, for now. The idea of "Favicon as DOM" is under construction.
When it comes to a huge file loading or download in a tab, a tiny progress indicator on favicon could be an interesting but also considerate UX experience. The idea comes from a long time ago and has been realized by so many open-source developers, and it comes back to me when try to solve this good first issue for the Mozilla Send.
So here is React-LoadCon for React community, now this tiny project can only use canvas to draw dynamic images and replace the tag, which is extremely tedious, but it plans to be a more general tool to offer Favicon as DOM
. dom-to-img could be introduced to simplify the covert process.
And if you find the idea interesting,
npm install --save react-loadcon
or
yarn add react-loadcon
Put <LoadCon />
anywhere, even in your SSR components (LoadCon would only trigger after componentDidMount
).
<LoadCon percentage={this.state.percentage} />
Full example with async function, and show Success
or Exception
afterwards.
import React, { Component } from 'react'
import LoadCon from 'react-loadcon'
export default class ExampleComponent extends Component {
state = {
percentage: 0, // isRequired
status: 'normal', // oneOf(['normal', 'active', 'exception', 'success'])
type: 'pie', // oneOf(['pie', 'donut'])
}
componentDidMount () {
this.apiCall()
}
apiCall = () => {
this.setState({ status: 'active' })
fetch(url)
.then(res => return res.json())
.then(data => {
// normal loading
this.setState({ status: 'normal' })
// loading with success
this.setState({ status: 'success' })
setTimeout(() => {
this.setState({ status: 'normal' })
}, 1500)
})
.catch(e => {
this.setState({ status: 'exception' })
setTimeout(() => {
this.setState({ status: 'normal' })
}, 1500)
})
}
render () {
return (
<LoadCon
percentage={this.state.percentage}
status={this.state.status}
type={this.state.type}
/>
)
}
}
MIT © foreseaz