diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js
index a7d40e0cf9..70f61c7f8d 100644
--- a/frappe/public/js/frappe/ui/notifications/notifications.js
+++ b/frappe/public/js/frappe/ui/notifications/notifications.js
@@ -34,7 +34,6 @@ frappe.ui.Notifications = class Notifications {
 		</span>`)
 			.on("click", (e) => {
 				e.stopImmediatePropagation();
-				console.log("what");
 				frappe.set_route("Form", "Notification Settings", frappe.session.user);
 			})
 			.appendTo(this.header_actions)
@@ -224,15 +223,13 @@ class NotificationsView extends BaseNotificationsView {
 			.tooltip({ delay: { show: 600, hide: 100 }, trigger: "hover" });
 
 		this.setup_notification_listeners();
-		this.get_notifications_list(this.max_length).then((r) => {
-			if (!r.message) return;
-			this.dropdown_items = r.message.notification_logs;
-			frappe.update_user_info(r.message.user_info);
-			this.render_notifications_dropdown();
-			if (this.settings.seen == 0 && this.dropdown_items.length > 0) {
-				this.toggle_notification_icon(false);
-			}
-		});
+
+		this.dropdown_items = [];
+		this.notifications_fetched = false;
+
+		if (this.settings && this.settings.seen == 0) {
+			this.toggle_notification_icon(false);
+		}
 	}
 
 	update_dropdown() {
@@ -347,7 +344,7 @@ class NotificationsView extends BaseNotificationsView {
 						<div class="full-log-btn">${__("See all Activity")}</div>
 					</a>`);
 			} else {
-				this.container.append(
+				this.container.html(
 					$(`<div class="notification-null-state">
 					<div class="text-center">
 						<img src="/assets/frappe/images/ui-states/notification-empty-state.svg" alt="Generic Empty State" class="null-state">
@@ -408,6 +405,24 @@ class NotificationsView extends BaseNotificationsView {
 		});
 
 		this.parent.on("show.bs.dropdown", () => {
+			if (!this.notifications_fetched) {
+				this.container.html(`<div class="notification-null-state">
+					<div class="text-center">
+						<div class="spinner-border spinner-border-sm text-muted"></div>
+					</div>
+				</div>`);
+				this.get_notifications_list(this.max_length).then((r) => {
+					if (r.message && r.message.notification_logs) {
+						this.dropdown_items = r.message.notification_logs;
+						frappe.update_user_info(r.message.user_info);
+					} else {
+						this.dropdown_items = [];
+					}
+					this.render_notifications_dropdown();
+					this.notifications_fetched = true;
+				});
+			}
+
 			this.toggle_seen(true);
 			if (this.notifications_icon.find(".notifications-unseen").is(":visible")) {
 				this.toggle_notification_icon(true);
@@ -421,20 +436,33 @@ class NotificationsView extends BaseNotificationsView {
 
 class EventsView extends BaseNotificationsView {
 	make() {
-		let today = frappe.datetime.get_today();
-		frappe
-			.xcall(
-				"frappe.desk.doctype.event.event.get_events",
-				{
-					start: today,
-					end: today,
-				},
-				"GET",
-				{ cache: true }
-			)
-			.then((event_list) => {
-				this.render_events_html(event_list);
-			});
+		this.events_fetched = false;
+
+		this.parent.on("show.bs.dropdown", () => {
+			if (this.events_fetched) return;
+
+			this.container.html(`<div class="notification-null-state">
+				<div class="text-center">
+					<div class="spinner-border spinner-border-sm text-muted"></div>
+				</div>
+			</div>`);
+
+			let today = frappe.datetime.get_today();
+			frappe
+				.xcall(
+					"frappe.desk.doctype.event.event.get_events",
+					{
+						start: today,
+						end: today,
+					},
+					"GET",
+					{ cache: true }
+				)
+				.then((event_list) => {
+					this.render_events_html(event_list);
+					this.events_fetched = true;
+				});
+		});
 	}
 
 	render_events_html(event_list) {
diff --git a/frappe/public/js/frappe/ui/sidebar/sidebar.js b/frappe/public/js/frappe/ui/sidebar/sidebar.js
index ff43cd08d6..f07e9fdde5 100644
--- a/frappe/public/js/frappe/ui/sidebar/sidebar.js
+++ b/frappe/public/js/frappe/ui/sidebar/sidebar.js
@@ -484,7 +484,11 @@ frappe.ui.Sidebar = class Sidebar {
 			type: "Button",
 			class: "sidebar-notification hidden",
 			onClick: () => {
-				this.wrapper.find(".dropdown-notifications").toggleClass("hidden");
+				const $dropdown = this.wrapper.find(".dropdown-notifications");
+				$dropdown.toggleClass("hidden");
+				if (!$dropdown.hasClass("hidden")) {
+					$dropdown.trigger("show.bs.dropdown");
+				}
 				if (frappe.is_mobile()) {
 					this.wrapper.removeClass("expanded");
 				}