Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-loading-switch
Advanced tools
React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling
Weekly downloads
Readme
React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling.
Compatible with React, React Native, React Web, React anything!
npm i --save react-loading-switch
In our experience, re-writing identical or similar logic in every component can lead to problems ❌
if (loading)
and if (error)
👋With react-loading-switch, we won't need this:
const Puppy = ({ loading, error, puppy }) => {
if (error) {
return <RenderError error={error} />
}
if (!puppy) {
if (loading) {
return <RenderLoading />
}
return <RenderError error={new Error('Missing puppy data!')} />
}
return (
<View>{ `Finally the puppy is here! ${puppy.id}` }</View>
)
}
We won't need this:
const Puppy = ({ loading, error, puppy }) => {
if (loading) return <RenderLoading />
if (error) return <RenderError error={error} />
return <View>{ `Finally the puppy is here! ${puppy.id}` }</View>
}
react-loading-switch
✅<LoadingSwitch />
🍻This example uses all available props, but in practice it gets cleaner:
import LoadingSwitch from 'react-loading-switch'
const Puppy = ({ loading, error, puppy }) => (
<LoadingSwitch
error={error}
errorWhenMissing={() => new Error('Missing puppy data!')}
loading={loading}
renderError={(error) => <DataError error={error} />}
renderLoading={() => <Loading />}
require={puppy}
>
{ () => (
<View>{ `The puppy data is here! ${puppy.id}` }</View>
) }
</LoadingSwitch>
)
Share identical behavior across similar components 👩👦👦
import LoadingSwitch from 'react-loading-switch'
export const PuppyLoadingSwitch = (props) => (
<LoadingSwitch
errorWhenMissing={() => new Error('Could not find puppy!')}
renderLoading={() => <p>Loading puppies...</p>}
renderError={(error) => <p>Error: {error.message}</p>}
{...props}
/>
)
<PuppyLoadingSwitch />
in every component that shares this logicNow we're talkin' 🎉
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={puppy}
>
{ () => (
<View>{ `The puppy data is here! ${puppy.id}` }</View>
) }
</PuppyLoadingSwitch>
)
You can use one LoadingSwitch component for your entire application, or you can use different LoadingSwitches in different areas. It's up to you!
require
This optional feature allows us to avoid long property lookup chains in JSX.
Compare the below to the above. Notice the lack of data.puppy.whatever
const PuppyBirthday = ({ loading, error, data}) => (
<PuppyLoadingSwitch
/* ... */
require={data && data.puppy}
>
{ ({ name, birthday }) => (
<View>{ `${name}'s birthday is ${birthday}!` }</View>
) }
</PuppyLoadingSwitch>
)
<Query />
componentsimport PuppyLoadingSwitch from '../PuppyLoadingSwitch'
import { Query } from 'react-apollo'
const GET_PUPPY = gql`
query puppy($puppyId: ID!) {
puppy(id: $puppyId) {
id
name
birthday
}
}
`;
const PuppyBirthday = ({ puppyId }) => (
<Query query={GET_PUPPY} variables={{ puppyId }}>
{({ loading, error, data}) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={data && data.puppy}
>
{ ({ name, birthday }) => (
<View>{ `${name}'s birthday is ${birthday}!` }</View>
) }
</PuppyLoadingSwitch>
)}
</Query>
)
require
prop uses JavaScript truthy/falsey checking.Falsey in JavaScript: false || null || undefined || 0 || '' || NaN
const Puppy = ({ loading, error, someData, moreData }) => (
<PuppyLoadingSwitch
/* ... */
require={someData && moreData && moreData.foo}
>
{ () => (
<View>{ moreData.foo.name }</View>
) }
</PuppyLoadingSwitch>
)
See the test/ directory in this repo for detailed snapshot tests that cover the whole API.
Most of the React-Apollo example apps use this pattern, where loading takes precedence:
export const Character = withCharacter(({ loading, hero, error }) => {
if (loading) return <div>Loading</div>;
// ...
fetchPolicy: 'cache-and-network'
conflicts with the aboveExcerpt from the apollo-client
README
However, just because
data.loading
is true it does not mean that you won’t have data. For instance, if you already havedata.todos
, but you want to get the latest todos from your APIdata.loading
might be true, but you will still have the todos from your previous request.
tl;dr we might still want to render the data we have, even if loading === true
.
data
before loading
As long as there is no error
, and require
is truthy, it renders its children
; even if loading === true
. Now we can safely use the cache-and-network
fetch-policy with no chance of seeing a loading state when we have data we could be rendering.
From src/LoadingSwitch.js
if (error) {
return renderError(error)
}
if (!require) {
if (loading) {
return renderLoading()
}
if (errorWhenMissing) {
return renderError(typeof errorWhenMissing === 'function' ? errorWhenMissing() : errorWhenMissing)
}
}
return children(require)
In this example, renderLoading
will be rendered if loading
is truthy, even if we have some other data:
require={!loading && puppy}
Now when loading
is truthy require
evaluates falsey.
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={!loading && puppy}
>
{ () => (
<View>
{ `We are not loading and the puppy data is here! ${puppy.id}` }
</View>
) }
</PuppyLoadingSwitch>
)
Or, if we only care about loading
and error
, we don't need to check for data presence:
import PuppyLoadingSwitch from '../PuppyLoadingSwitch'
const Puppy = ({ loading, error, puppy }) => (
<PuppyLoadingSwitch
error={error}
loading={loading}
require={!loading}
>
{ () => (
<View>
{ `We are not loading! ${puppy.id}` }
</View>
) }
</PuppyLoadingSwitch>
)
FAQs
React component API for easily composing the render logic surrounding react-apollo data fetching, loading, and error handling
The npm package react-loading-switch receives a total of 247 weekly downloads. As such, react-loading-switch popularity was classified as not popular.
We found that react-loading-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.