Document delayed topbar

guides/introduction/installation.md

@@ -314,14 +314,34 @@ $ npm install --prefix assets --save topbar
 Then customize LiveView to use it in your `assets/js/app.js`, right before the `liveSocket.connect()` call:
 
 ```js
-import topbar from "topbar"
-
 // Show progress bar on live navigation and form submits
+import topbar from "topbar"
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", info => topbar.show())
 window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 ```
 
+Alternatively, you can also delay showing the `topbar` and wait if the results do not appear within 200ms:
+
+```js
+// Show progress bar on live navigation and form submits
+import topbar from "topbar"
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+let topBarScheduled = undefined;
+
+window.addEventListener("phx:page-loading-start", () => {
+  if(!topBarScheduled) {
+    topBarScheduled = setTimeout(() => topbar.show(), 200);
+  };
+});
+
+window.addEventListener("phx:page-loading-stop", () => {
+  clearTimeout(topBarScheduled);
+  topBarScheduled = undefined;
+  topbar.hide();
+});
+```
+
 ## Location for LiveView modules
 
 By convention your LiveView modules and `heex` templates should be placed in `lib/my_app_web/live/` directory.