fix: remove ready state check

Author: graphieros

app/components/Modal.client.vue

@@ -1,16 +1,9 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle: string
-  whenReadyOnly?: boolean
 }>()
 
-const emit = defineEmits<{
-  (e: 'opened'): void
-  (e: 'closed'): void
-}>()
-
-const dialogRef = ref<HTMLDialogElement>()
-const isReady = ref(false)
+const dialogRef = useTemplateRef('dialogRef')
 
 const modalTitleId = computed(() => {
   const id = getCurrentInstance()?.attrs.id
@@ -21,25 +14,8 @@ function handleModalClose() {
   dialogRef.value?.close()
 }
 
-function handleTransitionEnd(e: TransitionEvent) {
-  if (e.target !== dialogRef.value) return
-  if (e.propertyName !== 'opacity') return
-  if (!dialogRef.value?.matches(':modal')) return
-
-  isReady.value = true
-  emit('opened')
-}
-
-function handleCloseEvent() {
-  isReady.value = false
-  emit('closed')
-}
-
 defineExpose({
-  showModal: () => {
-    isReady.value = false
-    dialogRef.value?.showModal()
-  },
+  showModal: () => dialogRef.value?.showModal(),
   close: () => dialogRef.value?.close(),
 })
 </script>
@@ -48,14 +24,12 @@ defineExpose({
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      @transitionend="handleTransitionEnd"
-      @close="handleCloseEvent"
       closedby="any"
       class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
-      :class="props.whenReadyOnly ? (isReady ? 'modal-ready' : 'modal-not-ready') : ''"
       :aria-labelledby="modalTitleId"
       v-bind="$attrs"
     >
+      <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
         <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
           {{ modalTitle }}
@@ -69,13 +43,14 @@ defineExpose({
           <span class="i-carbon-close w-5 h-5" aria-hidden="true" />
         </button>
       </div>
-
+      <!-- Modal body content -->
       <slot />
     </dialog>
   </Teleport>
 </template>
 
 <style scoped>
+/* Backdrop styling when any of the modals are open */
 dialog:modal::backdrop {
   @apply bg-black/60;
 }
@@ -102,15 +77,4 @@ dialog:modal {
     opacity: 0;
   }
 }
-
-/* whenReadyOnly: keep it non-visible but allow opacity transition to run */
-.modal-not-ready:modal {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.modal-ready:modal {
-  visibility: visible;
-  pointer-events: auto;
-}
 </style>

app/components/Package/ChartModal.vue

@@ -1,17 +1,9 @@
-<script setup lang="ts">
-defineEmits<{
-  (e: 'opened'): void
-  (e: 'closed'): void
-}>()
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <Modal
-    id="chart-modal"
-    whenReadyOnly
     :modalTitle="$t('package.downloads.modal_title')"
-    @opened="$emit('opened')"
-    @closed="$emit('closed')"
+    id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
   >
     <div class="font-mono text-sm">

app/components/Package/WeeklyDownloadStats.vue

@@ -11,17 +11,12 @@ const props = defineProps<{
 const chartModal = useModal('chart-modal')
 
 const isChartModalOpen = shallowRef(false)
-const isChartModalReady = shallowRef(false)
-
-function openChartModal() {
+async function openChartModal() {
   isChartModalOpen.value = true
   // ensure the component renders before opening the dialog
-  nextTick(() => chartModal.open())
-}
-
-function handleCloseChartModal() {
-  isChartModalOpen.value = false
-  isChartModalReady.value = false
+  await nextTick()
+  await nextTick()
+  chartModal.open()
 }
 
 const { fetchPackageDownloadEvolution } = useCharts()
@@ -253,15 +248,8 @@ const config = computed(() => {
     </CollapsibleSection>
   </div>
 
-  <PackageChartModal
-    v-if="isChartModalOpen"
-    @close="isChartModalOpen = false"
-    @opened="isChartModalReady = true"
-    @closed="handleCloseChartModal"
-  >
-    <!-- The chart is only rendered when the dialog element has fully transitioned, to avoid the chart from triggering too early its internal auto-sizing -->
+  <PackageChartModal v-if="isChartModalOpen" @close="isChartModalOpen = false">
     <PackageDownloadAnalytics
-      v-if="isChartModalReady"
       :weeklyDownloads="weeklyDownloads"
       :inModal="true"
       :packageName="props.packageName"