<Can> loading state while AJAX loading

[kitseno]

I'm new on using this package and not sure if you already have it. But what I'd like to know if it's possible to have a loading state while updating the ability.

AuthService.js

return Http.get('/api/auth/check')
      .then((res) => {
        // Check auth reducer
        action.authCheck(res.data);
        // Update ability CASL
        ability.update(res.data.scopes); // <--- update ability after checking authentication
      })
      .catch(err => {
        console.log(err)
      })

Page.js

// This will not appear until the checking and updating is complete
<Can I="Administer" a="Permission">
...
</Can>

Also open for suggestions.

Thanks in advance.

[stalniy]

As I understood you want to show several loading spinners while you are requesting user permissions. Correct it me if I'm wrong.

At least for now there is no way to pass alternative content to <Can> component. I plan to implement passThrough option in #105 which will allow to always render component children. This will allow to do things like disabling buttons instead of hiding them and also it'll be possible to do what you want.

However I believe even now you can do this quite easily. Just create your custom wrapper component:

function Loder(props) {
  return (
     props.isLoading ? <LoadingSpiner  /> : props.children
  );
}

Later you can use this:

<Loader isLoading>
   <Can>....</Can>
</Loader>

Obviously you can even merge Can and Loader together:

function CanWithLoader({ isLoading, ...rest }) {
  return (
     isLoading ? <LoadingSpiner  /> : <Can {...rest}>{props.children}</Can>
  );
}

And use it like:

<CanWithLoader I="Administer" a="Permission" isLoading={isLoading}>
...
</CanWithLoader>

[kitseno]

Exactly what I need. Thanks @stalniy.

I also decided to use redux to pass the props isLoading from my AuthService.js.

export function checkAuth() {

    return dispatch => (
        new Promise((resolve, reject) => {
            dispatch(action.checkingAuth(true)); //<--- this 
            return Http.get('/api/auth/check')
              .then((res) => {

                // Check auth reducer
                dispatch(action.authCheck(res.data));

                // Update ability CASL
                ability.update(res.data.scopes);

                dispatch(action.checkingAuth(false));  //<--- and this 

                return resolve();
              })
              .catch(err => {
                console.log(err)
              })
      })
    )
}

Although, the component children almost instantly appear, I just want to remove that stutter feeling that was caused by the AJAX request with the help of simple loading.

[stalniy]

Cool! I'm glad you found a solution