From 50bae02241cff70a75ca4fad18b8b699946af690 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Mon, 30 Oct 2023 15:31:05 -0700
Subject: [PATCH] refactor: move dom load events to utils

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/Sidebar.vue        |  6 +-----
 src/components/frame/XImgCache.ts |  5 +++--
 src/native/days.ts                |  4 +---
 src/services/utils/fragment.ts    |  3 ++-
 src/services/utils/helpers.ts     | 12 ++++++++++++
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a790b4d7..6080d3d4 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -85,11 +85,7 @@ export default defineComponent({
     };
 
     // Register native tab after DOMContentLoaded
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', this.registerNative.bind(this)); // wait for it
-    } else {
-      this.registerNative(); // already fired
-    }
+    utils.onDOMLoaded(this.registerNative.bind(this));
   },
 
   beforeDestroy() {
diff --git a/src/components/frame/XImgCache.ts b/src/components/frame/XImgCache.ts
index 1f7aa1a7..f5bf524d 100644
--- a/src/components/frame/XImgCache.ts
+++ b/src/components/frame/XImgCache.ts
@@ -1,4 +1,5 @@
 import { API } from '@services/API';
+import { onDOMLoaded } from '@services/utils';
 import { workerImporter } from '../../worker';
 import type * as w from './XImgWorker';
 
@@ -24,8 +25,8 @@ function startWorker() {
   });
 }
 
-// Configure worker on startup
-document.addEventListener('DOMContentLoaded', () => {
+// Set up garbage collection after DOM is loaded
+onDOMLoaded(() => {
   if (_m.mode !== 'user') return;
 
   // Periodic blob cache cleaner
diff --git a/src/native/days.ts b/src/native/days.ts
index ac65def4..7213d9ca 100644
--- a/src/native/days.ts
+++ b/src/native/days.ts
@@ -14,9 +14,7 @@ const seenABUIDs = new Set<string>();
 
 // Clear the cache whenever the timeline is refreshed
 if (has()) {
-  document.addEventListener('DOMContentLoaded', () => {
-    utils.bus.on('nativex:db:updated', () => daysCache.clear());
-  });
+  utils.onDOMLoaded(() => utils.bus.on('nativex:db:updated', () => daysCache.clear()));
 }
 
 /**
diff --git a/src/services/utils/fragment.ts b/src/services/utils/fragment.ts
index 23db1187..07f3440d 100644
--- a/src/services/utils/fragment.ts
+++ b/src/services/utils/fragment.ts
@@ -1,4 +1,5 @@
 import { bus } from './event-bus';
+import { onDOMLoaded } from './helpers';
 
 /** Mapping of route name to key type */
 enum FragmentType {
@@ -189,7 +190,7 @@ export const fragment = {
   },
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+onDOMLoaded(() => {
   // Skip unless in user mode
   if (_m.mode !== 'user') return;
 
diff --git a/src/services/utils/helpers.ts b/src/services/utils/helpers.ts
index 06dc5f53..7f7eb22e 100644
--- a/src/services/utils/helpers.ts
+++ b/src/services/utils/helpers.ts
@@ -194,3 +194,15 @@ export function removeExtension(filename: string) {
 export function isNetworkError(error: any) {
   return error?.code === 'ERR_NETWORK';
 }
+
+/**
+ * Add event listener to DOMContentLoaded and fire
+ * callback immediately if the event has already fired.
+ */
+export function onDOMLoaded(callback: () => void) {
+  if (document.readyState !== 'complete') {
+    document.addEventListener('DOMContentLoaded', callback);
+  } else {
+    callback();
+  }
+}