refactor: move dom load events to utils

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/components/Sidebar.vue

@@ -85,11 +85,7 @@ export default defineComponent({
     };
 
     // Register native tab after DOMContentLoaded
-    if (document.readyState === 'loading') {
+    utils.onDOMLoaded(this.registerNative.bind(this));
-      document.addEventListener('DOMContentLoaded', this.registerNative.bind(this)); // wait for it
-    } else {
-      this.registerNative(); // already fired
-    }
   },
 
   beforeDestroy() {

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
+// Set up garbage collection after DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
+onDOMLoaded(() => {
   if (_m.mode !== 'user') return;
 
   // Periodic blob cache cleaner

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.onDOMLoaded(() => utils.bus.on('nativex:db:updated', () => daysCache.clear()));
-    utils.bus.on('nativex:db:updated', () => daysCache.clear());
-  });
 }
 
 /**

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;
 

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();
+  }
+}