CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(ui): longer startup splash and updated loading animation

Browse Source 
The startup splash now holds for at least 4 seconds (progress 2% per tick up to 90%)
instead of 2, and the loading animation is updated.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nitesh
2026-10-16 12:31:24 +05:30
co-authored by Claude Opus 5.5
parent 6507e68203
commit 55f5c1cf32
2 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/animations/loading_animation.json
+42 -40
View File
@@ -45,15 +45,17 @@
"hasMask": false, "hasMask": false,
"ao": 0, "ao": 0,
"ks": { "a": { "a": 0, "k": [ "ks": { "a": { "a": 0, "k": [
-17.052704811096184, 0,
-15.0467209815979 0,
0
], "ix": 1 }, "s": { "a": 0, "k": [ ], "ix": 1 }, "s": { "a": 0, "k": [
362.228, 394,
362.228, 394,
100 100
], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [ ], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [
188.2303284168625, 250,
195.49656352277756 250,
0
], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, ], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } },
"shapes": [ "shapes": [
{ {
@@ -341,16 +343,16 @@
"g": { "p": 3, "k": { "a": 0, "k": [ "g": { "p": 3, "k": { "a": 0, "k": [
0, 0,
1, 1,
0.4470588235294118, 0.6,
0, 0.2,
0.485, 0.485,
0.9725490196078431,
0.2235294117647059,
0.5019607843137255,
1, 1,
0.9411764705882353, 0.6,
0, 0.2,
1 1,
1,
0.6,
0.2
], "ix": 8 } }, ], "ix": 8 } },
"t": 1, "t": 1,
"a": { "a": 0, "k": 0 }, "a": { "a": 0, "k": 0 },
@@ -363,7 +365,7 @@
"lj": 1, "lj": 1,
"ml": 4, "ml": 4,
"o": { "a": 0, "k": 100, "ix": 9 }, "o": { "a": 0, "k": 100, "ix": 9 },
"w": { "a": 0, "k": 2, "ix": 10 } "w": { "a": 0, "k": 2.5, "ix": 10 }
}, },
{ {
"ty": "fl", "ty": "fl",
@@ -402,8 +404,8 @@
"o": { "o": {
"a": 1, "a": 1,
"k": [ "k": [
{ "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 0 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [28], "t": 0 },
{ "s": [360], "t": 90.0000036657751 } { "s": [388], "t": 90.0000036657751 }
], ],
"ix": 3 "ix": 3
}, },
@@ -437,7 +439,7 @@
250, 250,
250, 250,
0 0
], "ix": 2 }, "r": { "a": 0, "k": 60, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, ], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } },
"shapes": [ "shapes": [
{ {
"ty": "gr", "ty": "gr",
@@ -723,16 +725,16 @@
], "ix": 5 }, ], "ix": 5 },
"g": { "p": 3, "k": { "a": 0, "k": [ "g": { "p": 3, "k": { "a": 0, "k": [
0, 0,
0, 1,
0.7764705882352941, 1,
1, 1,
0.485, 0.485,
0.24705882352941178,
0.38823529411764707,
1, 1,
1, 1,
0.49411764705882355, 1,
0, 1,
1,
1,
1 1
], "ix": 8 } }, ], "ix": 8 } },
"t": 1, "t": 1,
@@ -746,7 +748,7 @@
"lj": 1, "lj": 1,
"ml": 4, "ml": 4,
"o": { "a": 0, "k": 100, "ix": 9 }, "o": { "a": 0, "k": 100, "ix": 9 },
"w": { "a": 0, "k": 0.5, "ix": 10 } "w": { "a": 0, "k": 2.5, "ix": 10 }
}, },
{ {
"ty": "fl", "ty": "fl",
@@ -813,14 +815,14 @@
0, 0,
0 0
], "ix": 1 }, "s": { "a": 0, "k": [ ], "ix": 1 }, "s": { "a": 0, "k": [
362.228, 330,
362.228, 330,
100 100
], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [ ], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [
250, 250,
250, 250,
0 0
], "ix": 2 }, "r": { "a": 0, "k": 30, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, ], "ix": 2 }, "r": { "a": 0, "k": 0, "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } },
"shapes": [ "shapes": [
{ {
"ty": "gr", "ty": "gr",
@@ -1106,17 +1108,17 @@
], "ix": 5 }, ], "ix": 5 },
"g": { "p": 3, "k": { "a": 0, "k": [ "g": { "p": 3, "k": { "a": 0, "k": [
0, 0,
1, 0.0784,
0.8235294117647058, 0.7059,
0, 0.2118,
0.485, 0.485,
0.5019607843137255, 0.0784,
0.8117647058823529, 0.7059,
0.5019607843137255, 0.2118,
1, 1,
0, 0.0784,
0.8, 0.7059,
1 0.2118
], "ix": 8 } }, ], "ix": 8 } },
"t": 1, "t": 1,
"a": { "a": 0, "k": 0 }, "a": { "a": 0, "k": 0 },
@@ -1129,7 +1131,7 @@
"lj": 1, "lj": 1,
"ml": 4, "ml": 4,
"o": { "a": 0, "k": 100, "ix": 9 }, "o": { "a": 0, "k": 100, "ix": 9 },
"w": { "a": 0, "k": 0.5, "ix": 10 } "w": { "a": 0, "k": 2.5, "ix": 10 }
}, },
{ {
"ty": "fl", "ty": "fl",
@@ -1168,8 +1170,8 @@
"o": { "o": {
"a": 1, "a": 1,
"k": [ "k": [
{ "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [0], "t": 0 }, { "o": { "x": 0.167, "y": 0.167 }, "i": { "x": 0.833, "y": 0.833 }, "s": [-28], "t": 0 },
{ "s": [360], "t": 90.0000036657751 } { "s": [332], "t": 90.0000036657751 }
], ],
"ix": 3 "ix": 3
}, },
src/index.html
+6 -6
View File
@@ -325,10 +325,10 @@
}; };
document.head.appendChild(script); document.head.appendChild(script);
// Progress simulation stages (Guaranteed ~2 seconds duration on refresh) // Progress simulation stages (Guaranteed ~4 seconds duration on refresh: 2% every 90ms reaches 90% in about 4s)
var interval = setInterval(function () { var interval = setInterval(function () {
if (progress < 90) { if (progress < 90) {
progress += 5; progress += 2;
} else if (angularReady && progress < 100) { } else if (angularReady && progress < 100) {
progress += 5; progress += 5;
} }
@@ -351,7 +351,7 @@
} }
}, 90); }, 90);
// Enforce minimum hold time (2000ms = 2 seconds) so refresh always shows the animation // Enforce minimum hold time (4000ms = 4 seconds) so refresh always shows the animation
setTimeout(function () { setTimeout(function () {
minTimePassed = true; minTimePassed = true;
if (angularReady) { if (angularReady) {
@@ -359,7 +359,7 @@
if (bar) bar.style.width = '100%'; if (bar) bar.style.width = '100%';
dismissSplash(); dismissSplash();
} }
}, 2000); }, 4000);
function dismissSplash() { function dismissSplash() {
if (dismissed) return; if (dismissed) return;
@@ -387,12 +387,12 @@
} }
}; };
// Safety fallback (Max 7s in case of backend network failure) // Safety fallback (Max 9s in case of backend network failure)
setTimeout(function () { setTimeout(function () {
angularReady = true; angularReady = true;
minTimePassed = true; minTimePassed = true;
dismissSplash(); dismissSplash();
}, 7000); }, 9000);
})(); })();
</script> </script>