fix: ui improve

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

packages/kami-design/components/Image/component.tsx

@@ -22,7 +22,7 @@ import { escapeHTMLTag } from '~/utils/utils'
 
 import { LazyLoad } from '../Lazyload'
 import styles from './index.module.css'
-import { useCalculateSize } from './use-calculate-size'
+import { useCalculateNaturalSize } from './use-calculate-size'
 
 interface ImageProps {
   defaultImage?: string
@@ -77,13 +77,20 @@ const Image: FC<
           !loaded && styles['image-hide'],
         )}
         data-status={loaded ? 'loaded' : 'loading'}
+        onAnimationEnd={onImageAnimationEnd}
       >
         <img src={src} alt={alt} ref={imageRef} loading="lazy" />
       </div>
     </>
   )
 })
 
+const onImageAnimationEnd: React.AnimationEventHandler<HTMLDivElement> = (
+  e,
+) => {
+  ;(e.target as HTMLElement).dataset.animated = '1'
+}
+
 export type ImageLazyRef = { status: 'loading' | 'loaded' }
 
 export const ImageLazy = memo(
@@ -92,6 +99,9 @@ export const ImageLazy = memo(
     ImageProps &
       DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
   >((props, ref) => {
+    useEffect(() => {
+      console.log('update')
+    })
     const {
       defaultImage,
       src,
@@ -114,7 +124,7 @@ export const ImageLazy = memo(
     const placeholderRef = useRef<HTMLDivElement>(null)
 
     const wrapRef = useRef<HTMLDivElement>(null)
-    const [calculatedSize, calculateDimensions] = useCalculateSize()
+    const [calculatedSize, calculateDimensions] = useCalculateNaturalSize()
 
     const [loaded, setLoad] = useState(false)
     const loaderFn = useCallback(() => {

packages/kami-design/components/Image/index.module.css

@@ -38,6 +38,10 @@
   animation: blur-dark 0.8s forwards ease-in-out;
 }
 
+.lazyload-image[data-animated] {
+  animation: none !important;
+}
+
 .img-alt {
   text-align: center;
   font-size: 14px;

packages/kami-design/components/Image/index.ts

@@ -1,3 +1,3 @@
 export * from './component'
-export { useCalculateSize } from './use-calculate-size'
+export { useCalculateNaturalSize } from './use-calculate-size'
 export { calculateDimensions } from './utils/calc-image'

packages/kami-design/components/Image/use-calculate-size.tsx

@@ -4,7 +4,7 @@ import { calculateDimensions } from '@mx-space/kami-design/components/Image/util
 
 const initialState = { height: 0, width: 0 }
 type Action = { type: 'set'; height: number; width: number } | { type: 'reset' }
-export const useCalculateSize = () => {
+export const useCalculateNaturalSize = () => {
   const [state, dispatch] = useReducer(
     (state: typeof initialState, payload: Action) => {
       switch (payload.type) {

src/assets/styles/extra.css

@@ -93,7 +93,7 @@ pre > code {
   transition: color 0.5s;
 
   * {
-    background: var(--light-bg);
+    background: transparent !important;
   }
 
   .linenumber {

src/components/widgets/CodeHighlighter/index.tsx

@@ -23,16 +23,23 @@ export const HighLighter: FC<Props> = observer((props) => {
   }, [value])
   const isPrintMode = appUIStore.mediaType === 'print'
 
+  const prevThemeCSS = useRef<ReturnType<typeof loadStyleSheet>>()
+
   useInsertionEffect(() => {
     const css = loadStyleSheet(
       `https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prism-themes/1.9.0/prism-one-${
         isPrintMode ? 'light' : colorMode
       }.css`,
     )
 
-    return () => {
-      css?.remove()
+    if (prevThemeCSS.current) {
+      const $prev = prevThemeCSS.current
+      css.$link.onload = () => {
+        $prev.remove()
+      }
     }
+
+    prevThemeCSS.current = css
   }, [colorMode, isPrintMode])
   useInsertionEffect(() => {
     loadStyleSheet(

src/utils/load-script.ts

@@ -50,30 +50,39 @@ export function loadScript(url: string) {
   })
 }
 
-const cssSet = new Set()
+const cssMap = new Map<string, HTMLLinkElement>()
 
 export function loadStyleSheet(href: string) {
-  if (cssSet.has(href)) {
-    return
+  if (cssMap.has(href)) {
+    const $link = cssMap.get(href)!
+    return {
+      $link,
+      remove: () => {
+        $link.parentNode && $link.parentNode.removeChild($link)
+        cssMap.delete(href)
+      },
+    }
   }
   const $link = document.createElement('link')
   $link.href = href
   $link.rel = 'stylesheet'
   $link.type = 'text/css'
   $link.crossOrigin = 'anonymous'
-  cssSet.add(href)
+  cssMap.set(href, $link)
 
   $link.onerror = () => {
     $link.onerror = null
-    cssSet.delete(href)
+    cssMap.delete(href)
   }
+
   document.head.appendChild($link)
 
   return {
     remove: () => {
       $link.parentNode && $link.parentNode.removeChild($link)
-      cssSet.delete(href)
+      cssMap.delete(href)
     },
+    $link,
   }
 }