fix mounted event

resources/assets/src/index.tsx

@@ -41,9 +41,7 @@ async function loadModules() {
         typeof route.el === 'string'
           ? document.querySelector(route.el)
           : route.el
-      ReactDOM.render(<Root />, c, () => {
-        setTimeout(() => emitter.emit('mounted', { el: route.el }), 0)
-      })
+      ReactDOM.render(<Root />, c)
     }
   }
 }

resources/assets/src/scripts/hooks/useEmitMounted.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react'
+import { emit } from '../event'
+
+export default function useEmitMounted() {
+  useEffect(() => {
+    emit('mounted')
+  }, [])
+}

resources/assets/src/views/auth/Forgot.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react'
 import { hot } from 'react-hot-loader/root'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import urls from '@/scripts/urls'
@@ -13,6 +14,8 @@ const Forgot: React.FC = () => {
   const [warningMessage, setWarningMessage] = useState('')
   const ref = useRef<Captcha | null>(null)
 
+  useEmitMounted()
+
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value)
   }

resources/assets/src/views/auth/Login.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { showModal } from '@/scripts/notify'
@@ -37,6 +38,8 @@ const Login: React.FC = () => {
   const recaptcha = useBlessingExtra<string>('recaptcha')
   const invisibleRecaptcha = useBlessingExtra<boolean>('invisible')
 
+  useEmitMounted()
+
   useEffect(() => {
     setHasTooManyFails(blessing.extra.tooManyFails as boolean)
   }, [])

resources/assets/src/views/auth/Registration.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { hot } from 'react-hot-loader/root'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { toast } from '@/scripts/notify'
@@ -20,6 +21,8 @@ const Registration: React.FC = () => {
   const confirmationRef = useRef<HTMLInputElement | null>(null)
   const captchaRef = useRef<Captcha | null>(null)
 
+  useEmitMounted()
+
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value)
   }

resources/assets/src/views/auth/Reset.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { hot } from 'react-hot-loader/root'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { toast } from '@/scripts/notify'
@@ -12,6 +13,8 @@ const Reset: React.FC = () => {
   const [warningMessage, setWarningMessage] = useState('')
   const [isPending, setIsPending] = useState(false)
 
+  useEmitMounted()
+
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value)
   }

resources/assets/src/views/skinlib/Show/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { hot } from 'react-hot-loader/root'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import useMount from '@/scripts/hooks/useMount'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
@@ -35,6 +36,8 @@ const Show: React.FC = () => {
   const reportScore = useBlessingExtra<number>('report')
   const container = useMount('#previewer')
 
+  useEmitMounted()
+
   useEffect(() => {
     const fetchInfo = async () => {
       const url = location.href

resources/assets/src/views/skinlib/SkinLibrary/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { toast } from '@/scripts/notify'
@@ -28,6 +29,8 @@ const SkinLibrary: React.FC = () => {
   const [totalPages, setTotalPages] = useState(1)
   const currentUid = useBlessingExtra<number | null>('currentUid', null)
 
+  useEmitMounted()
+
   useEffect(() => {
     const parseSearch = (query: string) => {
       const search = new URLSearchParams(query)

resources/assets/src/views/skinlib/Upload.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import { hot } from 'react-hot-loader/root'
 import { t } from '@/scripts/i18n'
 import useBlessingExtra from '@/scripts/hooks/useBlessingExtra'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import useMount from '@/scripts/hooks/useMount'
 import * as fetch from '@/scripts/net'
 import { showModal, toast } from '@/scripts/notify'
@@ -32,6 +33,8 @@ const Upload: React.FC = () => {
 
   const container = useMount('#previewer')
 
+  useEmitMounted()
+
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value)
   }

resources/assets/src/views/user/Closet/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
 import debounce from 'lodash.debounce'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { showModal, toast } from '@/scripts/notify'
@@ -40,6 +41,8 @@ const Closet: React.FC = () => {
   const [cape, setCape] = useState<Texture | null>(null)
   const [showModalApply, setShowModalApply] = useState(false)
 
+  useEmitMounted()
+
   useEffect(() => {
     const getItems = async () => {
       setIsLoading(true)

resources/assets/src/views/user/Dashboard/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import styled from '@emotion/styled'
 import { hot } from 'react-hot-loader/root'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { toast } from '@/scripts/notify'
@@ -53,6 +54,8 @@ const Dashboard: React.FC = () => {
   const [canSignAfterZero, setCanSignAfterZero] = useState(false)
   const [signGap, setSignGap] = useState(24)
 
+  useEmitMounted()
+
   useEffect(() => {
     const fetchInfo = async () => {
       setLoading(true)

resources/assets/src/views/user/Players/index.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { hot } from 'react-hot-loader/root'
+import useEmitMounted from '@/scripts/hooks/useEmitMounted'
+import useTexture from '@/scripts/hooks/useTexture'
 import { t } from '@/scripts/i18n'
 import * as fetch from '@/scripts/net'
 import { showModal, toast } from '@/scripts/notify'
-import useTexture from '@/scripts/hooks/useTexture'
 import { Player, TextureType } from '@/scripts/types'
 import urls from '@/scripts/urls'
 import Loading from '@/components/Loading'
@@ -22,6 +23,8 @@ const Players: React.FC = () => {
   const [showModalAddPlayer, setShowModalAddPlayer] = useState(false)
   const [showModalReset, setShowModalReset] = useState(false)
 
+  useEmitMounted()
+
   const selectPlayer = (player: Player) => {
     setSelected(player.pid)
     setSkin(player.tid_skin)