Function for showing a loading animation while Alva or the Preview loads

[lkuechler]

We need a function that can be called to create a BrowserWindow while something is loading in the application.
The BrowserWindow should load a simple HTML file.
This way we don't have to wait for react or other scripts to initialise.

In this file we can implement the loading animation from issue #115.

It should be possible to close the loading BrowserWindow from outside to be able to control it inside a event listener for a different window.

The function should then be implemented inside src/electron/electron.ts to show the loading spinner until the main application is ready.

[faaizalikhan1]

Hey! just had some doubts, so I looked up electron's docs and was able to create a simple browser window. I'm still a bit confused so as to how will the loader start? will there be some sort of trigger?

// The loader

const {BrowserWindow, app} = require('electron');
const url = require('url');
const path = require('path');

let load;

function loading() {
    load = new BrowserWindow({fullscreen: true,frame: false, center: true, });
    load.loadURL(`file://${__dirname}/transition.html`);
}

app.on('ready',loading);

[lkuechler]

Hi @goprime10,
The idea was to have a trigger to create a new Browserwindow. Pretty much like you did in your example.
But i just looked at Alva again and we don't need a loading animation on startup that much anymore but we really need a loading animation in the preview area.
This can be done a bit simpler.
Your loading animation code can just be added in the preview.html file inside the div with the id app.
It would be very helpful if you could do this.

Thank you for your help and sorry for giving unclear todos.

[faaizalikhan1]

@lkuechler Sure!! so should I add the css as an inline styling in the div?

[lkuechler]

@goprime10 for now we should do it this way :)

[faaizalikhan1]

Hey! so I forked the repo, edited the file and started a pull request, but it shows "The Travis CI build failed ". Can I know what went wrong? So I can change it accordingly

[lkuechler]

Hi. You can just press details next to the failing pipeline. But in your case the Pipeline breaks because your commit does not follow the commit convention guidelines. :)
We follow the Angular Guidelines for our commits: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits

If we follow them it would look like this for example:
feat(config): add styleguide option for choosing a specific analyzer

We also have a script for helping to write the commits npm run commit.

[faaizalikhan1]

Hey! sorry but I may need a bit more help, so I read about the guidelines, is my commit message supposed to look like this:

feat() : add loading animation for preview

add loading animation's css

Closes #299

Also what should I add for the scope? I'm sorry for these questions, it's like I've been introduced into a new world haha

[lkuechler]

Wow this already looks very good :)
We use the scope for the area of the application that we are changing. For example:
Preview, Pattern-List, Property-List, Store

In your case this would be Preview.
Based on this you will not need to repeat the location of the change in your message:

feat(preview): add loading animation

Closes #299

I also removed the body text because it is just a repetition of the title. We normally use the body if we have the feeling that the title is not enough to understand the change.

[faaizalikhan1]

@lkuechler Thank you for the help!, let's see, I've tried it again, hope it works well

[lkuechler]

@goprime10 Looks very good.
I just changed some small stuff like indentation and some breaking styles and created a new PR.
It would be great if you could look over it and say if this looks okay for you now.
https://github.com/meetalva/alva/pull/321/files

After i get your approval i would merge it in to the master :)

[faaizalikhan1]

Hey @lkuechler! you can remove the second div, the one with outer class, and in css,and change the styles from a class to id(#app). Adding the app div changes the positioning of the circles, and so instead of an outer div, just pointing the styles to the app id works right (.outer to #app). Otherwise it's great!

[lkuechler]

@goprime10 this was breaking the preview when the components where finished loading.
The way i changed it all loading elements are removed when the load is finished :)

[faaizalikhan1]

oh okay got it 👍

[lkuechler]

@goprime10 I just merged it in to the Master. Thank you for your great contribution :)