Skip to content

Commit 3e35942

Browse files
agriyakhetarpalagriyakhetarpal
authored
Replace the JupyterLite loading spinner with a custom JupyterEverywhere spinning indicator (#152)
* Add default lab interface HTML file * Define a `--je-lilac` colour * Load SVGs for base and landing CSS * Add lab index template A * Add commands for copying template and JE logo * Define `--je-lilac` in this page itself * Apply changes as a patch instead
1 parent 877f22c commit 3e35942

File tree

3 files changed

+109
-6
lines changed

3 files changed

+109
-6
lines changed

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,14 @@
3434
"build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
3535
"build:labextension": "jupyter labextension build .",
3636
"copy:landing:template": "cp templates/index.html dist/index.html",
37+
"patch:lab:index": "patch -p1 --forward < templates/customise-title-and-spinner.patch || patch -p1 -R --dry-run < templates/customise-title-and-spinner.patch",
38+
"copy:je-spinner-logo": "cp style/icons/logo.svg dist/lab/logo.svg",
3739
"copy:favicon": "cp static/favicon.ico dist/favicon.ico && cp static/favicon.ico dist/lab/favicon.ico",
38-
"fix:lab:branding": "sed -i -e 's/<title>JupyterLite<\\/title>/<title>Jupyter Everywhere<\\/title>/g' -e 's/Loading JupyterLite\\.\\.\\./Loading Jupyter Everywhere\\.\\.\\./g' dist/lab/index.html",
39-
"build:landing:css": "esbuild style/landing.css --bundle --minify --outfile=dist/landing.css",
40-
"build:base:css": "esbuild style/base.css --bundle --minify --outfile=dist/base.css",
40+
"build:landing:css": "esbuild style/landing.css --bundle --minify --loader:.svg=dataurl --outfile=dist/landing.css",
41+
"build:base:css": "esbuild style/base.css --bundle --minify --loader:.svg=dataurl --outfile=dist/base.css",
4142
"build:css": "jlpm build:landing:css && jlpm build:base:css",
42-
"build:landing": "esbuild src/landing.tsx --bundle --outfile=dist/landing.js --minify --loader:.svg=dataurl --loader:.png=dataurl --loader:.jpeg=dataurl && jlpm copy:landing:template && jlpm build:css",
43-
"build:jupyterlite": "cd lite && jupyter lite build --XeusAddon.environment_file=xeus-environment.yml --output-dir=../dist && cd .. && jlpm build:landing && jlpm copy:favicon && jlpm fix:lab:branding",
43+
"build:landing": "esbuild src/landing.tsx --bundle --outfile=dist/landing.js --minify --loader:.svg=dataurl --loader:.png=dataurl --loader:.jpeg=dataurl && jlpm copy:landing:template && jlpm patch:lab:index && jlpm copy:je-spinner-logo && jlpm build:css",
44+
"build:jupyterlite": "cd lite && jupyter lite build --XeusAddon.environment_file=xeus-environment.yml --output-dir=../dist && cd .. && jlpm build:landing && jlpm copy:favicon",
4445
"build:all": "jlpm build && jlpm build:jupyterlite",
4546
"build:labextension:dev": "jupyter labextension build --development True .",
4647
"build:lib": "tsc --sourceMap",

‎style/base.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
--je-sidebar-width: calc(var(--je-scale) * 110px);
2727
--je-toolbar-height: calc(var(--je-scale) * 67px);
2828
--je-margin-below-toolbar: calc(var(--je-scale) * 15px);
29+
--je-lilac: #d8b8dc;
2930
--je-border-color: #e6e6e6;
3031
--je-slate-blue-gradient:
3132
linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 20%) 100%), #4b3187;
@@ -216,7 +217,7 @@
216217

217218
#jp-main-dock-panel[data-mode='single-document'] {
218219
padding: var(--je-document-padding) !important;
219-
background: #d8b8dc;
220+
background: var(--je-lilac);
220221
}
221222

222223
#jp-main-dock-panel[data-mode='single-document'] .jp-MainAreaWidget {

‎templates/customise-title-and-spinner.patch‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
From 331b85e6b233371a7903355fe915b7dca151a4fb Mon Sep 17 00:00:00 2001
2+
From: Agriya Khetarpal <[email protected]>
3+
Date: Tue, 22 Jul 2025 22:16:08 +0530
4+
Subject: [PATCH] Customise loading indicator and title for Jupyter Everywhere
5+
6+
---
7+
newindex.html | 49 +++++++++++++++++++++++++++++++++++++++++--------
8+
1 file changed, 41 insertions(+), 8 deletions(-)
9+
10+
diff --git a/dist/lab/index.html b/dist/lab/index.html
11+
index 962feb4..9731e89 100644
12+
--- a/dist/lab/index.html
13+
+++ b/dist/lab/index.html
14+
@@ -1,7 +1,7 @@
15+
<!DOCTYPE html>
16+
<html>
17+
<head>
18+
- <title>JupyterLite</title>
19+
+ <title>Jupyter Everywhere</title>
20+
<meta charset="utf-8" />
21+
<meta name="viewport" content="width=device-width, initial-scale=1" />
22+
<meta name="Description" content="WASM powered Jupyter running in the browser." />
23+
@@ -33,6 +33,10 @@
24+
}.call(this));
25+
</script>
26+
<style>
27+
+ :root {
28+
+ --je-lilac: #d8b8dc;
29+
+ }
30+
+
31+
body {
32+
margin: 0;
33+
padding: 0;
34+
@@ -72,19 +76,45 @@
35+
display: block;
36+
}
37+
38+
- .jupyterlite-loading-indicator-spinner {
39+
- width: 60px;
40+
- height: 60px;
41+
+ .jupyterlite-loading-indicator-container {
42+
+ position: relative;
43+
+ width: 70px;
44+
+ height: 70px;
45+
margin: 0 auto 20px;
46+
+ }
47+
+
48+
+ .jupyterlite-loading-indicator-spinner {
49+
+ width: 100%;
50+
+ height: 100%;
51+
border: 6px solid rgba(0, 0, 0, 0.1);
52+
- border-top: 6px solid #FFDC00; /* Bright yellow color */
53+
+ border-top: 6px solid var(--je-lilac);
54+
border-radius: 50%;
55+
animation: jupyter-spin 1s linear infinite;
56+
+ box-sizing: border-box;
57+
}
58+
59+
body.jp-mod-dark .jupyterlite-loading-indicator-spinner {
60+
border: 6px solid rgba(255, 255, 255, 0.1);
61+
- border-top: 6px solid #FFDC00;
62+
+ border-top: 6px solid var(--je-lilac);
63+
+ box-sizing: border-box;
64+
+ }
65+
+
66+
+ .jupyterlite-loading-indicator-logo {
67+
+ position: absolute;
68+
+ top: 50%;
69+
+ left: 50%;
70+
+ transform: translate(-50%, -50%);
71+
+ width: 50px;
72+
+ height: 50px;
73+
+ background-image: url('logo.svg');
74+
+ background-size: cover;
75+
+ background-repeat: no-repeat;
76+
+ background-position: center;
77+
+ z-index: 1001;
78+
+ }
79+
+
80+
+ body.jp-mod-dark .jupyterlite-loading-indicator-logo {
81+
+ background-color: #6d28d9;
82+
}
83+
84+
.jupyterlite-loading-indicator-text {
85+
@@ -114,8 +144,11 @@
86+
</head>
87+
<body class="jp-ThemedContainer" data-notebook="lab">
88+
<div id="jupyterlite-loading-indicator" class="hidden">
89+
- <div class="jupyterlite-loading-indicator-spinner"></div>
90+
- <div class="jupyterlite-loading-indicator-text">Loading JupyterLite...</div>
91+
+ <div class="jupyterlite-loading-indicator-container">
92+
+ <div class="jupyterlite-loading-indicator-spinner"></div>
93+
+ <div class="jupyterlite-loading-indicator-logo"></div>
94+
+ </div>
95+
+ <div class="jupyterlite-loading-indicator-text">Loading Jupyter Everywhere...</div>
96+
</div>
97+
<noscript>
98+
<div style="text-align: center; padding: 20px;">
99+
--
100+
2.39.5 (Apple Git-154)
101+

0 commit comments

Comments
 (0)