Implement new 5.0 loading screen.#8970
Conversation
|
Is there a special reason for the The first time I looked at it, I instantly got the feeling, oh there is something off, which caused my to look at the code and recognize the padding. In my personal opinion it would look better, if the "Loading Kibana" text would be centered. |
|
@timroes The idea is the find the visual center for the text. If we remove the padding entirely, the text really feels like it's sitting low in the container:
Do you see what I mean? I can reduce the padding a little, but I think this visual centering is working for me, at least. I'd love to hear other people's thoughts too. |
|
I get what you mean. In my opinion - but again taste is so very personal - it felt quite off in a way, that directly "disturbed" me. On a more technical side: I also looked in the codepen above on it, and in contrast to Kibana Open Sans isn't loaded as a webfont there for me, but Lato is. So it actually renders with another font, than in your screenshots, which looks for me a bit more off, than your screen:
|
|
I'm with @cjcenizal on this one. Using the visual center makes the content look correctly balanced to me. |
|
Is it possible we just have the wrong padding for the visual center? For me, both the open sans and lato versions look off-center (sitting high in the container, as you called it). About half the padding makes it look much more centered to me:
That would also help make the lato version look less jarring. |
|
Ahhh I think a fundamental problem is Open Sans isn't even getting loaded, so we're all seeing different things depending on whether you have Open Sans / Lato installed locally. Let me fix that first and then I'll address the visual centering question. |
|
OK I slightly lowered the visual center, and I also made a much bigger change: instead of serving fonts directly from the Kibana server, we're now using the Google Web Fonts CDN. This adds an additional external dependency (though non-critical, since if this CDN fails, the user will just see Helvetica or Arial instead of Open Sans), but it also means the font will be cached by users' browsers and we can eliminate the flash of invisible content you saw in the original GIF.
|
|
@cjcenizal Kibana has to be about to run behind a firewall, so relying on an external CDN for assets isn't ideal. For things like tile maps, we get around that by specifically offering them an alternative means of configuring map support, so they could use their own mapping server from their own network. |
c67a339 to
88c58c8
Compare
src/server/http/index.js
Outdated
There was a problem hiding this comment.
These imports are not used here; instead they're used in https://github.com/elastic/kibana/blob/master/src/server/http/register_hapi_plugins.js
88c58c8 to
cd3a98a
Compare
src/ui/ui_bundle_collection.js
Outdated
There was a problem hiding this comment.
Bluebird's resolve isn't being used.
src/server/http/index.js
Outdated
There was a problem hiding this comment.
Couple notes:
- Using
server.exposeStaticDir()will ensure that these files are served just like the rest - We don't control
process.env.PWD, use__dirname resolve()takes multiple arguments and combines them string interpolation is unnecessary- The entire bundles directory is already being served at
/bundles/ - Looks like the font files are being stored in the
ui/public/assetsdirectory, not the bundles directory
I'm thinking this sections should look something like:
server.exposeStaticDir('/ui/fonts/{path*}', resolve(__dirname, '../../ui/public/assets/fonts'));There was a problem hiding this comment.
Thanks for the great explanation and example.
src/ui/views/chrome.jade
Outdated
There was a problem hiding this comment.
These urls need to be absolute and include the basePath or they won't work at both /login and /app/xyz.
src/ui/ui_bundle_collection.js
Outdated
There was a problem hiding this comment.
This isn't necessary, we can just serve them from where they are
|
Refresh looks really nice, I can't detect any FOUC |
- Add tasks for copying these files to bundles dir. - Add endpoint for serving them.
cd3a98a to
cf8b7d6
Compare
cf8b7d6 to
d02da5c
Compare
|
🎉 🎉 🎉 |
|
🎉 |
* Implement new 5.0 loading screen. * Remove old Kibana loading gif. * Add Open Sans font files to public/assets/fonts dir, and remove some unused ones. * Serve fonts directly from ui directory, using exposeStaticDir.
* Implement new 5.0 loading screen. * Remove old Kibana loading gif. * Add Open Sans font files to public/assets/fonts dir, and remove some unused ones. * Serve fonts directly from ui directory, using exposeStaticDir. Former-commit-id: c190e58
Addresses #6466 and #8114
Prototype: http://codepen.io/cjcenizal/pen/ObJoJO
There's a weird flash of no content as the DOM gets changed by Kibana when it's loading. I suggest we address that in another ticket.