diff --git a/resources/assets/src/index.tsx b/resources/assets/src/index.tsx
index 0fa4fd30..6e19eb3f 100644
--- a/resources/assets/src/index.tsx
+++ b/resources/assets/src/index.tsx
@@ -41,9 +41,7 @@ async function loadModules() {
typeof route.el === 'string'
? document.querySelector(route.el)
: route.el
- ReactDOM.render(, c, () => {
- setTimeout(() => emitter.emit('mounted', { el: route.el }), 0)
- })
+ ReactDOM.render(, c)
}
}
}
diff --git a/resources/assets/src/scripts/hooks/useEmitMounted.ts b/resources/assets/src/scripts/hooks/useEmitMounted.ts
new file mode 100644
index 00000000..5c75f9f5
--- /dev/null
+++ b/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')
+ }, [])
+}
diff --git a/resources/assets/src/views/auth/Forgot.tsx b/resources/assets/src/views/auth/Forgot.tsx
index c642337e..3df7a405 100644
--- a/resources/assets/src/views/auth/Forgot.tsx
+++ b/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(null)
+ useEmitMounted()
+
const handleEmailChange = (event: React.ChangeEvent) => {
setEmail(event.target.value)
}
diff --git a/resources/assets/src/views/auth/Login.tsx b/resources/assets/src/views/auth/Login.tsx
index 3304a26c..7feb17ee 100644
--- a/resources/assets/src/views/auth/Login.tsx
+++ b/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('recaptcha')
const invisibleRecaptcha = useBlessingExtra('invisible')
+ useEmitMounted()
+
useEffect(() => {
setHasTooManyFails(blessing.extra.tooManyFails as boolean)
}, [])
diff --git a/resources/assets/src/views/auth/Registration.tsx b/resources/assets/src/views/auth/Registration.tsx
index fadaec28..49ec231c 100644
--- a/resources/assets/src/views/auth/Registration.tsx
+++ b/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(null)
const captchaRef = useRef(null)
+ useEmitMounted()
+
const handleEmailChange = (event: React.ChangeEvent) => {
setEmail(event.target.value)
}
diff --git a/resources/assets/src/views/auth/Reset.tsx b/resources/assets/src/views/auth/Reset.tsx
index 72e30796..d614ea55 100644
--- a/resources/assets/src/views/auth/Reset.tsx
+++ b/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) => {
setPassword(event.target.value)
}
diff --git a/resources/assets/src/views/skinlib/Show/index.tsx b/resources/assets/src/views/skinlib/Show/index.tsx
index d23934f4..3a5204f5 100644
--- a/resources/assets/src/views/skinlib/Show/index.tsx
+++ b/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('report')
const container = useMount('#previewer')
+ useEmitMounted()
+
useEffect(() => {
const fetchInfo = async () => {
const url = location.href
diff --git a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx b/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
index 390c6e52..eb24f286 100644
--- a/resources/assets/src/views/skinlib/SkinLibrary/index.tsx
+++ b/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('currentUid', null)
+ useEmitMounted()
+
useEffect(() => {
const parseSearch = (query: string) => {
const search = new URLSearchParams(query)
diff --git a/resources/assets/src/views/skinlib/Upload.tsx b/resources/assets/src/views/skinlib/Upload.tsx
index 1bcd3a4c..db545810 100644
--- a/resources/assets/src/views/skinlib/Upload.tsx
+++ b/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) => {
setName(event.target.value)
}
diff --git a/resources/assets/src/views/user/Closet/index.tsx b/resources/assets/src/views/user/Closet/index.tsx
index 747059b7..aca03a4b 100644
--- a/resources/assets/src/views/user/Closet/index.tsx
+++ b/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(null)
const [showModalApply, setShowModalApply] = useState(false)
+ useEmitMounted()
+
useEffect(() => {
const getItems = async () => {
setIsLoading(true)
diff --git a/resources/assets/src/views/user/Dashboard/index.tsx b/resources/assets/src/views/user/Dashboard/index.tsx
index 9ecaa903..ab3665cb 100644
--- a/resources/assets/src/views/user/Dashboard/index.tsx
+++ b/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)
diff --git a/resources/assets/src/views/user/Players/index.tsx b/resources/assets/src/views/user/Players/index.tsx
index d46ad6d1..045527fc 100644
--- a/resources/assets/src/views/user/Players/index.tsx
+++ b/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)