Custom Loading Indicator Controllable Via Component State

I wanted more control over the loading indicator and so I created my own. Posting here so others can use. This indicator will show in whatever state in the component you have it enabled for.

Simply drag an HTML element onto your canvas and past the code below into the body.

<html>
    <head>
        <title>Classes</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>    
        <style type="text/css">

        .loader {
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }
       </style>
     </head>
    <body>
        <div class="loader"></div>
    </body>
</html>

1 Like

I haven’t yet checked this with developers but if possible we could tweak a Progress indicator element so that you can pick a component which will appear when progress indicator triggers. This way one could e.g. add Lottie animation to component and then use that component inside progress indicator.

Yea that would be legit. I would happily use the progress indicator if I could get it to trigger the right way.

I think there is also some things we have to take into consideration when we are changing both component states and loading to true.

It’s almost as if setting the loading status to true inside of a component script which updates the visual state overrides the loading state. I couldn’t ever get it to work that way.

Could you open a bit what you meant that you cannot get the progress indicator to trigger right away? It should appear when e.g. list is loading data or if file is being uploaded with file uploader element. Element’s change the state isLoading() to true.

In the Code glance it looks something like:

let cssClass_progress = ‘circularProgressIndicator’;
if (this.props.appActions.isLoading())
cssClass_progress += ’ circularProgressIndicator-active’;

In the Code glance for file uploader looks like this:

<FileUploader
accept=“image/*”
randomizeFilename
storageRef={firebase.storage().ref("")}
onUploadStart={() => {
this.props.appActions.setState({loading: true});
}}
onUploadError={error => {
this.props.appActions.setState({loading: false});
console.error(’** Firebase upload failed: ‘, error);
}}
onUploadSuccess={filename => {
this.props.appActions.setState({loading: false});
firebase.storage().ref("").child(filename).getDownloadURL().then(url => {
let setDataSlotValue = (v) => { this.props.appActions.updateDataSlot("", v) };
setDataSlotValue(url);
let setfilenameDataSlotValue = (v) => { this.props.appActions.updateDataSlot("", v) };
setfilenameDataSlotValue(filename);
}).catch(function(error) {
console.error(’** Firebase upload failed: ', error);
});
}}
/>

Well my issue if that I am doing quite a few writes directly to the Firebase backend as opposed to using a datasheet. I tried to trigger it manually with - this.props.appActions.setState({loading: true}); - but was never able to get it to work that way.

1 Like

And I tried to use the loading indicator and trigger it manually in a new project file at the top level of a screen canvas and IT DID work. So that’s why I was like maybe you can’t manually trigger it from within a component that you drag on where the state is controlled via a dataslot value.

Here is what I mean. I drag the loading indicator onto my component and then try to trigger it with this.props.appActions.setState({loading: false});

However, it doesn’t seem to work when I load up my app.

I also tried dragging it to the top level but couldn’t get it to trigger from the button script.