Loading screen

[xy2z]

When loading the app, show a nice loading "screen" untill Vue is complete.

[calvinmorett]

I would like to work on some interaction with this. Do we have any idea what is the best approach? I have a few ideas.

…

On Sat, May 4, 2019 at 9:27 AM xy2z ***@***.***> wrote: When loading the app, show a nice loading "screen" untill Vue is complete. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#52>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACY5OBKYCZT3YVHZR46XDXLPTWFK5ANCNFSM4HKY4QPQ> .

[xy2z]

Awesome!
It needs to be light so it wont take longer for loading the page. I was thinking of using font awesome, since its already in use.

So i was thinking it could an absolute div floating over the app, maybe with some background opacity. And just a css animated loading icon, and maybe a loading text.

What ideas do you have?

[calvinmorett]

Very similar to my idea, just design wise - sure there are a million ideas. Just a div like you suggest is the first step so let’s start there. Hmm could do something with font awesome animation really easily let me make a couple of ideas and send them

…

On Sat, May 4, 2019 at 4:17 PM xy2z ***@***.***> wrote: Awesome! It needs to be light so it wont take longer for loading the page. I was thinking of using font awesome, since its already in use. So i was thinking it could an absolute div floating over the app, maybe with some background opacity. And just a css animated loading icon, and maybe a loading text. What ideas do you have? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACY5OBPG5TVTMYDC6YB53P3PTXVN7ANCNFSM4HKY4QPQ> .

[calvinmorett]

First of all, I would like to also include this because it's a easy, and is just plug-n-play so to speak. I've used it before and it's got some really interesting templates, that can fit for anything.

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

https://github.hubspot.com/pace/docs/welcome/

--- Anyways, something I worked on quickly that might fit, 1kb in css - can be edited down some to go down in size a bit too.
https://codepen.io/CalvinMorett/full/vwYrJd

[xy2z]

This looks really nice! Is it using pace.js?
Altough this means we need 1kb of css and 5kb of pace.js (and a pace css theme?) to work...
But I feel like in the future we can also use Pace for when saving (notes, settings, etc.), since it works with ajax, so I'm up for seeing if it works as expected.

[calvinmorett]

This looks really nice! Is it using pace.js?

This is just a rough idea, like I said there are a million. This isn't with pace.js

Altough this means we need 1kb of css and 5kb of pace.js (and a pace css theme?) to work...

Sorry, I was confusing in my write up. My css file there could probably be less than <1kb if I edited it down and merged some things. Though, I do think pace would be what you're looking for.

But I feel like in the future we can also use Pace for when saving (notes, settings, etc.), since it works with ajax, so I'm up for seeing if it works as expected.

I think it looks really clean, and it can integrate easily.

[xy2z]

But we still need pace.js to actually know how far the progress is, with your example? Or else the loading bar will just loop endlessly.

I think we should use pace.js, I can definitely see alot of uses for this.
Can you integrate the one you made with pace.js?

[calvinmorett]

Yes, for sure I will try to integrate it, I haven’t done it before but was planning on doing this at some point because pace is powerful! I will focus on doing this integration and share the results, I hope I am able to create the same sort of styling if not - at least something simple enough where we can reiterate on it later, to fit the overall application.

…

On Mon, May 6, 2019 at 8:01 AM xy2z ***@***.***> wrote: But we still need pace.js to actually know how far the progress is, with your example? Or else the loading bar will just loop endlessly. I think we should use pace.js, I can definitely see alot of uses for this. Can you integrate the one you made with pace.js? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACY5OBOOKYBYFKZN7QB7QMTPUAMY5ANCNFSM4HKY4QPQ> .

[calvinmorett]

https://codepen.io/CalvinMorett/full/eamPeO

CTRL + R to keep refreshing the animation. Let me know your thoughts.

Download: https://gist.github.com/calvinmorett/2d79962831b730be1d34732077d25281

[xy2z]

Looks good!
Does pace requires jquery? I'd prefer not to add it to the app, just for a loader.

[calvinmorett]

No it doesn't. Link updated, JQuery removed.

[xy2z]

Good :) So it's ready to implement?
Feel free to submit a PR. If you have any questions don't hesitate to ask :)

[calvinmorett]

What is the best way to implement this on a pull request?

…

On Tue, May 7, 2019 at 9:12 AM xy2z ***@***.***> wrote: Good :) So it's ready to implement? Feel free to submit a PR. If you have any questions don't hesitate to ask :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACY5OBON67VVN6XN6NLQVE3PUF53TANCNFSM4HKY4QPQ> .

[xy2z]

Oh I just noticed the body css has background: #333, this should probably be removed or else it would affect the app? Can the background be set on .pace?

1. Add the CSS file to public/css/loader.css
2. Add pace script to https://github.com/xy2z/dopenote/blob/master/resources/views/app.blade.php (eg. line 13)
   And add the CSS in the styles section (line 8)
3. Test :)