From 679dc42251235642f4fe8d7580944c9982f15b8d Mon Sep 17 00:00:00 2001
From: Dan <danker.twist@gmail.com>
Date: Fri, 27 Oct 2023 15:08:28 -0400
Subject: [PATCH] feat: remove useSafeOnMounted workaround

Suspense + Animation issue was fixed https://github.com/vuejs/core/issues/5844
---
 src/components/Cursor.vue           |  5 +----
 src/components/Gallery/Grid.vue     |  7 ++-----
 src/composables/useSafeOnMounted.ts | 31 -----------------------------
 3 files changed, 3 insertions(+), 40 deletions(-)
 delete mode 100644 src/composables/useSafeOnMounted.ts

diff --git a/src/components/Cursor.vue b/src/components/Cursor.vue
index 9db07575..42df0ac4 100644
--- a/src/components/Cursor.vue
+++ b/src/components/Cursor.vue
@@ -57,9 +57,7 @@ const refreshItems = () => {
   focusMouse(cursor, newTexts)
 }
 
-const rootElement = ref(null)
-
-useSafeOnMounted(rootElement, async () => {
+onMounted(() => {
   if (ScrollTrigger.isTouch !== 1) {
     const cursor = document.querySelector('#cursor') as HTMLElement
     cursor.style.backgroundColor = 'transparent'
@@ -122,7 +120,6 @@ onNuxtReady(() => {
 <template>
   <div
     id="cursor"
-    ref="rootElement"
     class="border border-white pe-none position-fixed top-0 start-0 rounded-circle align-items-center justify-content-center"
     :style="{ 'display': 'none', 'height': '0.8rem', 'width': '0.8rem', 'z-index': 5, 'mix-blend-mode': 'exclusion' }"
   />
diff --git a/src/components/Gallery/Grid.vue b/src/components/Gallery/Grid.vue
index 59c652a0..63a7ff06 100644
--- a/src/components/Gallery/Grid.vue
+++ b/src/components/Gallery/Grid.vue
@@ -23,12 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
 const imagesData: Ref<any[]> = ref(props.images)
 const lightbox: Ref<PhotoSwipeLightbox|null> = ref(null)
 
-const rootElement = ref<HTMLElement>()
-
-useSafeOnMounted(rootElement, () => {
+onMounted(() => {
   if (!lightbox.value) {
     lightbox.value = new PhotoSwipeLightbox({
-      gallery: rootElement.value.$el,
+      gallery: '.masonry-wall',
       children: 'a',
       pswpModule: () => import('photoswipe'),
       wheelToZoom: true
@@ -73,7 +71,6 @@ watch(() => props.images, (newImages) => {
 
 <template>
   <masonry-wall
-    ref="rootElement"
     :items="imagesData"
     :column-width="columnWidth"
     :min-columns="minColumns"
diff --git a/src/composables/useSafeOnMounted.ts b/src/composables/useSafeOnMounted.ts
deleted file mode 100644
index fccb355f..00000000
--- a/src/composables/useSafeOnMounted.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted } from 'vue'
-
-export default (element: Ref<HTMLElement>, listener: () => void, checkTimeLimit = 100) => {
-  if (process.client) {
-    let timeId = 0
-    const checkInterval = 100
-    let checksLeft = checkTimeLimit / checkInterval
-
-    const check = () => {
-      if (element.value) {
-        listener()
-      } else {
-        if (checksLeft > 0) {
-          timeId = setTimeout(check, checkInterval)
-          checksLeft--
-        } else {
-          console.warn(`pass ${checkTimeLimit}ms, the element not ready! Please check.`)
-        }
-      }
-    };
-
-    onMounted(() => {
-      check()
-    })
-
-    onUnmounted(() => {
-      clearTimeout(timeId)
-    })
-  }
-}