feat: show widget loading stage in the loader

Author: mariobuikhuizen

ManyWidgets.ipynb

@@ -0,0 +1,60 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import ipywidgets as widgets\n",
+    "import ipyvuetify as v"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "buttons = [widgets.Button(description=f'button {i}') for i in range(1000)]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "v.Row(_metadata={'mount_id': 'content'}, children=buttons)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

share/jupyter/voila/templates/vuetify-base/nbconvert_templates/util.js

@@ -144,6 +144,9 @@ window.init = async (voila) => {
         };
     }
 
+    app.$data.loadingPercentage = -1;
+    app.$data.loading_text = 'Loading widgets';
+
     await widgetManager.build_widgets();
 
     Object.values(widgetManager._models)
@@ -161,6 +164,8 @@ window.init = async (voila) => {
             }
         });
 
+    app.$data.loadingPercentage = 0;
+    app.$data.loading_text = 'Done';
     app.$data.loading = false;
     removeInterferingStyleTags();
 };