UI to show that code is compiling in the browser window

[rauchg]

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]

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]

@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]

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

[teleginzhenya]

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]

@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]

Is this going to be only for development?

[timneutkens]

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

[teleginzhenya]

I did animation with zeit logo :)

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

[bennygenel]

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

[simonhaenisch]

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).

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]

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

[simonhaenisch]

@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]

@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]

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]

@simonhaenisch Looks perfect 😍

[simonhaenisch]

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

[rdev]

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

[rdev]

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]

@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]

@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

[morajabi]

@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]

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

[bennygenel]

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]

@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]

@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]

@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]

@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:

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]

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

[bennygenel]

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]

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]

@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.

[alehatsman]

Hey,

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

[bhurlow]

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]

yay

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.