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

UI to show that code is compiling in the browser window #4626

Closed
rauchg opened this issue Jun 17, 2018 · 34 comments

Comments

Projects
None yet
@rauchg
Copy link
Contributor

commented Jun 17, 2018

Currently, the only way to know that hot code replacement is going to happen (and that the Next.js compiler toolchain is doing work) is to look at the developer console.

Many times, one is looking at the resulting rendering instead, but it's hard to get an idea of progress.

I'd like to make this an umbrella thread for gathering ideas and feedback on how to best signal to the developer that work is happening.

Some requirements:

  • The top priority is that it must be non-invasive. Some ideas along these lines
    • Favicon animation
      • The demo works great in Chrome, but not Firefox. I wonder if we can make it work?
    • window.title changes
    • onscreen animation with a shadow root / careful style isolation
  • It must be unique and identifiable
  • It must be very lightweight, even though it will be enabled only during development

Bonus points:

  • Like jest, we can keep data around about how long each unique path takes to compile, to provide statistically accurate estimates when animating of how long the process is going to take
@stefanivic

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2018

How about something along the lines of a filling triangle ? That way we can keep that brand identity and apply some fun to it.

https://dribbble.com/shots/1894246-Triangle-animation-GIF
We could just use a black color fill.

I am sure @evilrabbit could patch something up. :D

@rauchg

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2018

@shahzeb1 as I mentioned in the "bonus" portion, we'd have two forms:

  • One based in a fixed estimate (let's say 500ms), that slows down at the end if the deadline is not met. This similar to how nprogress works.
  • We can also collect data for better estimates
@rauchg

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2018

@stefanivic that sounds nice but I also think having something unique to Next.js could be nice :)

@teleginzhenya

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2018

  1. I think that loading percentage in title is not bad, something like [10%] title.
  2. Probably it can be loading indicator in top of page.
  3. Also I was thinking about rotating X (make it like hourglass) in Next.js logo :)
images

loading
done

@stefanivic

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2018

@rauchg Well another thing that comes to mind is the letter N in Next.js

https://i.imgur.com/o567qtv.png
As you can see, the N sort of resembles the half of the triangle.

We can maybe create a transition from Zeit logo to N with some simplified animation of this: https://img-9gag-fun.9cache.com/photo/aWZRW82_460sv.mp4

Or just the letter N from scratch.

@morajabi

This comment has been minimized.

Copy link

commented Jun 18, 2018

Is this going to be only for development?

@timneutkens

This comment has been minimized.

Copy link
Member

commented Jun 18, 2018

@morajabi yep, as this is only to show webpack compilations going on.

@teleginzhenya

This comment has been minimized.

Copy link
Contributor

commented Jun 18, 2018

I did animation with zeit logo :)

2018-06-19 00 05 18 1

https://codepen.io/teleginzhenya/pen/PaEzPg

@bennygenel

This comment has been minimized.

Copy link
Contributor

commented Jun 18, 2018

How about using something like triangle from cli-spinners for the title?

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2018

I like the way Github does it when you are on a PR site, waiting for the CI to finish (after adding a commit)... just three states: yellow dot for building, green checkmark for done, red x for failed. It's a very subtle design but helpful enough (however it doesn't update sometimes when the tab is inactive in Chrome). Ionic does something similar by changing the color of the favicon from blue (idle) to yellow (building) or red (failed).

image
image

Another useful info might be a timestamp of the last successful build (or time since) in the title. But sometimes I pin the tab and only get to see the favicon. On my Macbook (no additional screens) I usually swipe from one desktop (editor) to the next (browser) while waiting for the build.

@morajabi

This comment has been minimized.

Copy link

commented Jun 19, 2018

@simonhaenisch 👍 Although, it's worth mentioning that we still need to show the user favicon after the compilation was done. Am I right?

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2018

@morajabi I wouldn’t mind having a next-specific favicon during development, to know that i’m in dev mode on localhost and not in production on my live website. Or one could patch up the user’s favicon with the overlayed icons, but that’s not simple anymore.

Edit: Just saw this tweet by Wes Bos about using canvas to base64 to favicon (as data url). That would make it easy to patch an existing favicon (load it into the canvas, add the overlay icons). Same idea as the mentioned favicon loader.

@morajabi

This comment has been minimized.

Copy link

commented Jun 19, 2018

@simonhaenisch The overlying thing would be really cool 👍 if we can make it work at a reasonable cost. We can!

I wouldn’t mind having a next-specific favicon during development

Yeah, but I imagine myself wanting to test my own favicon before deploying.

My opinion would be to not completely override the user favicon. If we're going to change, we can change it only while it's compiling. That's easier to do that changing user icon (adding overlay) and it has a decent user experience.

@bennygenel's suggestion re: using ◢ ◣ ◤ ◥ animation before the page title is an option too!

Since we don't have a real estimate of % remaining to complete the build, prepending [24%] to the title doesn't feel right in my opinion (unless we can estimate just close)

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 19, 2018

I just made a demo of patching an existing favicon: https://patch-favicon-vcxikxushz.now.sh. Works in Chrome and Firefox (Developer Edition) for me (macOS). The icons are not perfectly aligned (it's just some unicode characters rendered as text), but it's a proof that it's possible.

Edit: will try with octicons later (check, dot and x), and might just make it a package. Also found anybar-webpack and webpack-anybar, that's another nice way of doing it.

@morajabi

This comment has been minimized.

Copy link

commented Jun 19, 2018

@simonhaenisch Looks perfect 😍

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 21, 2018

https://patch-favicon-pxazgxlqkl.now.sh? Should it just go back to normal like 5-10 seconds after a successful build?

@rdev

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

Favicon is not shown in Safari unless the address bar is focused which it never is

@rdev

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

Is doing a progress line on top like this a bad idea? It's not really intrusive, but the issue is that people might have the same progress bar in their actual app

@morajabi

This comment has been minimized.

Copy link

commented Jun 22, 2018

@rdev

Favicon is not shown in Safari unless the address bar is focused which it never is

Yeah, that's true, for now. Since the Safari coming with Mojave before the fall will show favicons. Also, not showing this loading on Safari, wouldn't break the experience of Next IMO, since we show the status in the CLI currently too.

Is doing a progress line on top like this a bad idea? It's not really intrusive, but the issue is that people might have the same progress bar in their actual app

React Native uses something like this to show the build is running too, so thanks for mentioning it. It might be a bit confusing as It's not uncommon to use NProgress (a top progress bar similar to this one) just how zeit.co is using it now in their app.

@rdev

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

@morajabi

Safari coming with Mojave before the fall will show favicons

Are you sure? Cause I'm running Mojave beta and there's no favicon
screen shot 2018-06-22 at 17 48 59

@morajabi

This comment has been minimized.

Copy link

commented Jun 22, 2018

@rdev I'm not on beta, but I saw it on WWDC, and now a Google search: https://www.cultofmac.com/553373/safari-gets-its-favicons-back-in-ios-12-and-macos-mojave/

Looks like you need to enable them in Preferences > Tabs > Check "Show website icons in tabs"

Anyway, my point is, we will have them soon, and until then, it shouldn't be a problem in my opinion. :) What others think?

@rdev

This comment has been minimized.

Copy link
Member

commented Jun 22, 2018

@morajabi But it's not a default behavior. By default favicons are still hidden

@bennygenel

This comment has been minimized.

Copy link
Contributor

commented Jun 22, 2018

What others think?

In my opinion, it should not depend or assume developers' development environment. It should be available in minimal development environment. Because of this I still think changing title is the best option.

@morajabi

This comment has been minimized.

Copy link

commented Jun 22, 2018

@bennygenel Changing the title has also a bit less maintaining cost and is a more lightweight (as mentioned in the requirements):

It must be very lightweight, even though it will be enabled only during development


So far suggestions are these:

  1. % in Title: Changing title to [24%] Page Title by using data to provide statistically accurate estimates when animating of how long the process is going to take

  2. Character Animation in Title: Like using ◢ ◣ ◤ ◥ as frames to animate a text-based loading just before the page title.

  3. Status Overlay in Favicon: @simonhaenisch Made a cool demo of showing build status in the favicon as an overlay: https://patch-favicon-pxazgxlqkl.now.sh

  4. UI Banner / Bar: @teleginzhenya and @rdev suggested 2 kinds already. (Create React App used to have a bar IIRC. React Native has similar UI)

  5. Changing Favicon While Loading: It's different from the 3rd (favicon overlay) one. Here, we either animate a loading favicon, or a still loading icon. (Also, one suggested to override user favicon in developement)

Personal opinion: I'm ok with the first 3 options, I like the 3rd (favicon) one, I don't think 4th is optimal :)

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 22, 2018

@bennygenel as I already mentioned, i often pin the tab which means the title is hidden. Another edge case would be live-previewing on a mobile device, which often shows neither favicon nor title.

If it's more important that it works everywhere than that it's non-invasive/unobtrusive, then it should probably be something that's rendered within the window (like the mentioned loading bar or a spinner).

IMO favicon is the least invasive (doesn't move anything) and once Safari has them back it should be available in most browsers (has anyone tested the demo in Edge?). Anything within the window could potentially be in conflict with the actual site, but is guaranteed to work anywhere.

@teleginzhenya

This comment has been minimized.

Copy link
Contributor

commented Jun 23, 2018

@simonhaenisch https://nextjs-compiling-zkyfnpjqvp.now.sh/ possible example of something rendered in site. However, I'm agree that favicon is the most relevant solution.

@simonhaenisch

This comment has been minimized.

Copy link
Contributor

commented Jun 23, 2018

@teleginzhenya I remember browsersync doing onscreen notifications similar to that but I immediately searched for how to turn them off since they where taking too much space, especially when working on the mobile version:

image

How about putting just the dot in the corner (maybe the lower right, where there is usually no menus or important UI)? Then the "loading" dot could be animated (either as a spinner or filling up or whatever).

@teleginzhenya

This comment has been minimized.

Copy link
Contributor

commented Jun 23, 2018

@simonhaenisch sure, it can be fully customizable :) I was thinking about animation too, probs will do it soon.

@bennygenel

This comment has been minimized.

Copy link
Contributor

commented Jun 23, 2018

This might be a little crazy idea but give it to my inexperience if it is.

Would it be too hard to maintain if all three options (favicon, title and in window) were added and selectable through configuration?

All three option has some sort of use case and some sort of edge case and all have fairly simple implementations. Maybe leaving decision to the developer might be better even with a no indicator at all option.

@timneutkens

This comment has been minimized.

Copy link
Member

commented Jun 23, 2018

Would it be too hard to maintain if all three options (favicon, title and in window) were added and selectable through configuration?

We should do 1 and optimize that. It makes no sense to have to maintain 3 different ways of doing things in the codebase.

@lucleray

This comment has been minimized.

Copy link
Member

commented Jun 24, 2018

@rauchg

Bonus points:

Like jest, we can keep data around about how long each unique path takes to compile, to provide statistically accurate estimates when animating of how long the process is going to take

I think it's even possible to show the real progress, using webpack's internal ProgressPlugin.

It's the way nuxt/webpackbar is doing it.

@atsman

This comment has been minimized.

Copy link

commented Sep 14, 2018

Hey,

Is someone on it? Don't want to do double work if it is in progress...

@bhurlow

This comment has been minimized.

Copy link

commented Jan 18, 2019

figwheel, a clojurescript hot reloader puts a circle in the bottom right to indicate loading status. I found this to be a convenient location

@iamstarkov

This comment has been minimized.

Copy link

commented May 28, 2019

yay

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.