diff --git a/src/content/components/animation.tsx b/src/content/components/animation.tsx new file mode 100644 index 0000000..47c68d3 --- /dev/null +++ b/src/content/components/animation.tsx @@ -0,0 +1,11 @@ +import { keyframes } from 'styled-components/macro' + +export const rotate360Deg = keyframes` + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +` diff --git a/src/content/pages/problem-list/Editor.tsx b/src/content/pages/problem-list/Editor.tsx index df46937..d4b5b57 100644 --- a/src/content/pages/problem-list/Editor.tsx +++ b/src/content/pages/problem-list/Editor.tsx @@ -1,9 +1,10 @@ -import { ChangeEventHandler, FC, useEffect, useState } from 'react' +import { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react' import { css } from 'styled-components/macro' import { Input } from '@/components/Input' import { Button } from '@/components/Button' import ErrorToolTip from '@/components/ErrorToolTip' +import { rotate360Deg } from '@/components/animation' interface EditorProps { text?: string @@ -11,10 +12,62 @@ interface EditorProps { onCancel?: (...arg: any) => void } +const Loading = () => { + return ( +
props.theme.palette.button.disable}; + width: 75%; + height: 75%; + border-radius: 50%; + content: ''; + margin: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + `} + /> + ) +} + const Editor: FC = ({ text: initText = '', onSave, onCancel }) => { const [text, setText] = useState(initText) const [error, setError] = useState({ message: '', show: false }) + const [loading, setLoading] = useState(false) + // 判断当前组件是否挂载,还是已被卸载 + const isMount = useRef() + useEffect(() => { + isMount.current = true + return () => { + isMount.current = false + } + }, []) useEffect(() => { if (error.show) { setTimeout(() => { @@ -28,14 +81,16 @@ const Editor: FC = ({ text: initText = '', onSave, onCancel }) => { } const handleSave = async () => { + setLoading(true) if (typeof onSave === 'function') { try { await onSave(text) - // setText('') + if (isMount.current) setText('') } catch (error: any) { setError({ message: error.message, show: true }) } } + if (isMount.current) setLoading(false) } const handleCancel = () => { if (typeof onCancel === 'function') { @@ -45,7 +100,7 @@ const Editor: FC = ({ text: initText = '', onSave, onCancel }) => { return (
@@ -63,14 +118,14 @@ const Editor: FC = ({ text: initText = '', onSave, onCancel }) => { />
-
diff --git a/src/content/pages/problem-list/FavoriteItem.tsx b/src/content/pages/problem-list/FavoriteItem.tsx index 1a53dec..a79b91e 100644 --- a/src/content/pages/problem-list/FavoriteItem.tsx +++ b/src/content/pages/problem-list/FavoriteItem.tsx @@ -6,13 +6,14 @@ import { useRef, useState, } from 'react' -import { css, keyframes } from 'styled-components/macro' +import { css } from 'styled-components/macro' import { useAppSelector, useAppDispatch, useHover } from '@/hooks' import { Button } from '@/components/Button' import Modal from '@/components/Modal' import ErrorToolTip from '@/components/ErrorToolTip' import { ToolTip } from '@/components/ToolTip' +import { rotate360Deg } from '@/components/animation' import { selectFavoriteById, @@ -28,16 +29,6 @@ const DEFAULT_COVER = 'https://static.leetcode.cn/cn-frontendx-assets/production/_next/static/images/default-logo-5a15811cf52298855a46a3f400663063.png' const DEFAULT_FAVORITE_NAME = 'Favorite' -const rotate = keyframes` - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -` - interface FavoriteItemProps { idHash: string current: boolean @@ -237,9 +228,9 @@ const FavoriteItem: FC = ({ text-align: center; line-height: 18px; transform: translateZ(0); - animation: ${rotate} 10s infinite linear; + animation: ${rotate360Deg} 10s infinite linear; &:hover { - animation: ${rotate} 1s infinite linear; + animation: ${rotate360Deg} 1s infinite linear; } `} >