Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #20: adds a spinner during graph load #59

Closed
wants to merge 1 commit into from

Conversation

filmaj
Copy link
Contributor

@filmaj filmaj commented Dec 13, 2017

This PR addresses #20: display a loading indicator while Hubble is off fetching data.

Changes

  • Leverages spin.js for the spinner, so I added it to the layout template
  • The main column element's CSS had to be tweaked to use relative positioning
  • Each function creating each type of graph was tweaked to:
    a) create a spinner
    b) hide the spinner once network request completes

Considerations

  • What to do if the async net request for data errors? Currently, nothing happens, so the spinners keep on spinning.

Testing It

I pointed the _config.yml file to http://localhost:4000/demo-data, then ran jekyll serve from the docs/ folder. I loaded up http://localhost:4000 in Chrome, and using the Chrome Developer Tools' Network tab, I set the simulated network speed to "Slow 3G", then refreshed the page. That network profile was slow enough for me to be able to ensure that the spinner does show up relatively centered over where incoming graphs will be rendered to.

…e issuing async net request, stops (and destroys) the spinner once request is complete.
Copy link
Collaborator

@larsxschneider larsxschneider left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great PR! Thank you!

@@ -115,10 +115,18 @@ var stackedBarChartDefaults =
maintainAspectRatio: false
};

function createSpinner(canvas)
{
var parent = $("<div style=\"position:absolute;height:100%;width:100%;\"></div>");
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and in the other places below I think we should rather use let to declare the variables, no? I know this is not yet consistent throughout the codebase (... and that's why I love you linting proposal).

Does this sound good to you? If yes, then you don't need to to anything. I would just adjust your commit on merge.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds fine to me! Whatever style the project decides on, I will conform to. 👍

Once I start putting together the JS test running and linting changes I have planned, we can discuss in finer detail the particular JS style rules the project wants to adopt.

@larsxschneider
Copy link
Collaborator

Merged via ada9a07
Thank you 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants