Switch to simpler looking loading spinner #24107

skjnldsv · 2016-04-20T05:40:28Z

New spinner.
See discussion in ref issue.

Not compatible with ie (sigh) so i've added a fallback to gif!
I also added a small black loading icon: icon-loading-small-dark

ref #19091
@oparoz @Henni @jancborchardt @PVince81

ChristophWurst · 2016-04-20T06:44:30Z

On Firefox, the spinner does not spin.

skjnldsv · 2016-04-20T06:51:21Z

Dammit! It works with direct image loading, but not as background-image... :/

skjnldsv · 2016-04-20T06:59:19Z

Thanks @ChristophWurst ! :)
Okay, I switched from css animation to smil, it seems to be accepted as well as css animations:
http://caniuse.com/svg-smil

We still have the gif fallback for ie!

oparoz · 2016-04-20T07:07:08Z

Can't use SMIL

As of Chrome 45 SMIL is deprecated and usage will result in a warning in the console. Support is expected to be dropped in some future version.

skjnldsv · 2016-04-20T07:08:08Z

I'm gonna stop coding now, and raise goats somewhere in the alps...

oparoz · 2016-04-20T07:10:04Z

I'm gonna stop coding now, and raise goats somewhere in the alps...

Not everybody likes goat milk, you're going to need to include a hamster milk fallback

mmattel · 2016-04-20T07:54:04Z

I'm gonna stop coding now, and raise goats somewhere in the alps...

This is a problem. There is no more free space left in the alps to raise goats. Too many frustrated programmers occupied everything. But there are maybe free caves availabe for meditation 😄

skjnldsv · 2016-04-20T17:32:38Z

Okay, after a day of thinking while milking my goats, we should go for smil.
Considering the support still present for the next upcoming chrome & ff versions, we should be good for a while. Maybe the css-svg bug in ff will be fixed when smil will be dropped! :)
Chrome most used is 48 then 49, and ff is 44 then 45.

Let's review @oparoz @Henni @jancborchardt @PVince81 @MorrisJobke @ChristophWurst !
Procedure:

Install commit
Just use owncloud and search for an inconvenient loader. Mails, contacts, user menu, files, gallery...

skjnldsv · 2016-04-20T17:44:40Z

For future reference:
This is also another way of using after:

.icon-loading::after {
    position: absolute;
    content: url('../img/loading-css.svg');
    width: 100%;
    height: 100%;
    top:50%;
    left: 50%;
    margin: -25px 0 0 -25px;
}

MorrisJobke · 2016-04-20T19:29:11Z

Just use owncloud and search for an inconvenient loader. Mails, contacts, user menu, files, gallery...

Add sleep(5); to apps/dav/appinfo/v1/webdav.php and load the web UI ;)

MorrisJobke · 2016-04-20T19:30:45Z

Add sleep(5); to apps/dav/appinfo/v1/webdav.php and load the web UI ;)

Also the while waiting for the search results to come in seems to be an old one. Beside that it looks awesome :)

skjnldsv · 2016-04-21T05:02:25Z

@MorrisJobke here you go! :D

MorrisJobke · 2016-04-21T07:00:30Z

Tested and works so far. I would merge this in and then fix the remaining stuff afterwards.

👍

jancborchardt · 2016-04-21T12:14:19Z

core/search/css/results.css

-	vertical-align: middle;
-	margin-left: 10px;
+	float: left;
+    padding: 3px 10px;


Here too, last line indent is wrong.

jancborchardt · 2016-04-21T12:15:05Z

Very nice! :) Except the indentation stuff and the spinner in Files, everything looks much better now!

skjnldsv · 2016-04-21T12:20:34Z

@jancborchardt Better now? Is it spinning on ff?

ChristophWurst · 2016-04-21T12:35:15Z

Works, but only randomly on FF. When the image is not cached, it does not spin for some reason, which looks odd. :-/

skjnldsv · 2016-04-21T14:31:05Z

Should we assume the user will have loaded the svg at first and that it will be spinning on the rest of his browsing?

skjnldsv · 2016-04-21T17:29:11Z

@jancborchardt Files fixed.

jancborchardt · 2016-04-22T06:20:41Z

Nice! 👍 now only squash and this is good to merge

oparoz · 2016-04-22T08:59:06Z

~~Doesn't work~~ Almost works on Firefox

oparoz · 2016-04-22T09:05:26Z

~~Actually, that's not true. The spinner just freezes sometimes, but that's normal FF behaviour.~~ With an empty cache, the first spinner is always empty.

I have one concern though, the spinner itself doesn't really work that well in a lot of situations, especially when the 16px version is used. It's a bit too discreet. It's too thin.

jancborchardt · 2016-04-22T09:33:34Z

So for the 16px version we might need a dedicated one – the line thickness should be the same as for the big spinner (3px?), not scaled down.

The Firefox issues I would say we should fix going forward, otherwise this will sit for too long. :\

oparoz · 2016-04-22T09:40:58Z

So for the 16px version we might need a dedicated one – the line thickness should be the same as for the big spinner (3px?), not scaled down.

Sounds sane. I'm still worried about the big one as well, it's really thin compared to what's out there. There may be cases, especially when use as an overlay where it might not work that well.

The Firefox issues I would say we should fix going forward, otherwise this will sit for too long. :\

I think we should try pre-loading as you suggested. I was able to reproduce the problem after clearing the cache. It's quite obvious when you switch app after logging in.

MorrisJobke · 2016-04-22T13:46:17Z

Looks really nice and works now in Firefox too :)

MorrisJobke · 2016-04-22T13:46:29Z

👍

PVince81 · 2016-04-22T14:08:31Z

apps/files/js/filelist.js

@@ -2507,6 +2485,7 @@
 				}
 			});
 			fileUploadStart.on('fileuploadadd', function(e, data) {
+				console.log('XXXXXXX');


Yep, don't know how this got there! :O

skjnldsv · 2016-04-25T06:49:15Z

So, should we preload for ff?

jancborchardt · 2016-04-25T15:45:24Z

If that fixes the last issue, go for it! :)

skjnldsv · 2016-04-25T16:37:28Z

I will try, and we'll see :)

- Fix search spinner - Fix reset password loader - Fix login spinner - Fix ldap settings spinner - Fix files loader - Fix app loading header

skjnldsv · 2016-05-09T05:34:44Z

Closed in favor of #24491

lock · 2019-08-06T02:01:57Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

skjnldsv self-assigned this Apr 20, 2016

skjnldsv added design 3 - To Review labels Apr 20, 2016

skjnldsv added this to the 9.1-current milestone Apr 20, 2016

skjnldsv added 2 - Developing and removed 3 - To Review labels Apr 20, 2016

skjnldsv force-pushed the new-animated-svg-spinner branch from 95fed84 to ff5e4a3 Compare April 20, 2016 06:58

skjnldsv added 3 - To Review 2 - Developing and removed 2 - Developing 3 - To Review labels Apr 20, 2016

skjnldsv mentioned this pull request Apr 20, 2016

Switch to simpler looking loading spinner #19091

Closed

skjnldsv force-pushed the new-animated-svg-spinner branch from 648a44d to 515a4ad Compare April 21, 2016 04:46

MorrisJobke added 4 - To release 3 - To Review and removed 2 - Developing 4 - To release labels Apr 21, 2016

jancborchardt reviewed Apr 21, 2016
View reviewed changes

MorrisJobke added 3 - To Review and removed 2 - Developing labels Apr 22, 2016

PVince81 reviewed Apr 22, 2016
View reviewed changes

skjnldsv force-pushed the new-animated-svg-spinner branch 3 times, most recently from df47dde to 3796b58 Compare April 26, 2016 05:04

New loading svg and css classes edit

be20dc0

- Fix search spinner - Fix reset password loader - Fix login spinner - Fix ldap settings spinner - Fix files loader - Fix app loading header

skjnldsv force-pushed the new-animated-svg-spinner branch from 3237106 to be20dc0 Compare April 26, 2016 05:11

skjnldsv closed this May 9, 2016

MorrisJobke deleted the new-animated-svg-spinner branch May 9, 2016 06:15

lock bot locked as resolved and limited conversation to collaborators Aug 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to simpler looking loading spinner #24107

Switch to simpler looking loading spinner #24107

skjnldsv commented Apr 20, 2016 •

edited

Loading

ChristophWurst commented Apr 20, 2016

skjnldsv commented Apr 20, 2016

skjnldsv commented Apr 20, 2016 •

edited

Loading

oparoz commented Apr 20, 2016

skjnldsv commented Apr 20, 2016

oparoz commented Apr 20, 2016

mmattel commented Apr 20, 2016

skjnldsv commented Apr 20, 2016 •

edited

Loading

skjnldsv commented Apr 20, 2016

MorrisJobke commented Apr 20, 2016

MorrisJobke commented Apr 20, 2016

skjnldsv commented Apr 21, 2016 •

edited

Loading

MorrisJobke commented Apr 21, 2016

jancborchardt Apr 21, 2016

jancborchardt commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

ChristophWurst commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

jancborchardt commented Apr 22, 2016

oparoz commented Apr 22, 2016 •

edited

Loading

oparoz commented Apr 22, 2016 •

edited

Loading

jancborchardt commented Apr 22, 2016

oparoz commented Apr 22, 2016

MorrisJobke commented Apr 22, 2016

MorrisJobke commented Apr 22, 2016

PVince81 Apr 22, 2016

skjnldsv Apr 25, 2016

skjnldsv commented Apr 25, 2016

jancborchardt commented Apr 25, 2016

skjnldsv commented Apr 25, 2016

skjnldsv commented May 9, 2016

lock bot commented Aug 6, 2019

Switch to simpler looking loading spinner #24107

Switch to simpler looking loading spinner #24107

Conversation

skjnldsv commented Apr 20, 2016 • edited Loading

ChristophWurst commented Apr 20, 2016

skjnldsv commented Apr 20, 2016

skjnldsv commented Apr 20, 2016 • edited Loading

oparoz commented Apr 20, 2016

skjnldsv commented Apr 20, 2016

oparoz commented Apr 20, 2016

mmattel commented Apr 20, 2016

skjnldsv commented Apr 20, 2016 • edited Loading

skjnldsv commented Apr 20, 2016

MorrisJobke commented Apr 20, 2016

MorrisJobke commented Apr 20, 2016

skjnldsv commented Apr 21, 2016 • edited Loading

MorrisJobke commented Apr 21, 2016

jancborchardt Apr 21, 2016

Choose a reason for hiding this comment

jancborchardt commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

ChristophWurst commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

skjnldsv commented Apr 21, 2016

jancborchardt commented Apr 22, 2016

oparoz commented Apr 22, 2016 • edited Loading

oparoz commented Apr 22, 2016 • edited Loading

jancborchardt commented Apr 22, 2016

oparoz commented Apr 22, 2016

MorrisJobke commented Apr 22, 2016

MorrisJobke commented Apr 22, 2016

PVince81 Apr 22, 2016

Choose a reason for hiding this comment

skjnldsv Apr 25, 2016

Choose a reason for hiding this comment

skjnldsv commented Apr 25, 2016

jancborchardt commented Apr 25, 2016

skjnldsv commented Apr 25, 2016

skjnldsv commented May 9, 2016

lock bot commented Aug 6, 2019

skjnldsv commented Apr 20, 2016 •

edited

Loading

skjnldsv commented Apr 20, 2016 •

edited

Loading

skjnldsv commented Apr 20, 2016 •

edited

Loading

skjnldsv commented Apr 21, 2016 •

edited

Loading

oparoz commented Apr 22, 2016 •

edited

Loading

oparoz commented Apr 22, 2016 •

edited

Loading