From 395ea9ab9fd29ac72226e2deda9a0632d46df323 Mon Sep 17 00:00:00 2001
From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com>
Date: Sat, 16 Mar 2024 01:08:08 +0100
Subject: [PATCH] made notification dot appear if you load the page and there
 are already notifs

---
 packages/frontend/src/ui/_common_/common.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 85d7b201c..70097d89a 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -75,6 +75,7 @@ class NotificationFavIconDot {
 	src : string | null = null;
 	ctx : CanvasRenderingContext2D | null = null;
 	favconImage : HTMLImageElement | null = null;
+	loaded = false;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
@@ -92,6 +93,7 @@ class NotificationFavIconDot {
 
 			this.canvas.width = this.favconImage.width;
 			this.canvas.height = this.favconImage.height;
+			this.loaded = true;
 		};
 	}
 
@@ -120,11 +122,14 @@ class NotificationFavIconDot {
 		this.ctx.stroke();
 	}
 
-	_drawFavicon() {
+	private _drawFavicon() {
 		this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
-	setVisible(isVisible : boolean) {
+	async setVisible(isVisible : boolean) {
+		//Wait for it to have loaded the icon
+		const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500));
+		await new Promise(waiter);
 		this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this._drawIcon();
 		if (isVisible) this._drawDot();
@@ -158,9 +163,9 @@ if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
 	
-	watch(() => $i?.hasUnreadNotification, (hasAny) => {
-		notificationDot.setVisible(hasAny ?? false);
-	});
+	watch(() => $i?.hasUnreadNotification, (hasAny) => notificationDot.setVisible(hasAny ?? false));
+	
+	if ($i.hasUnreadNotification) notificationDot.setVisible(true);
 
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));