feat: enhance modal behavior and improve recommendations rendering

Innei · Innei · commit 18d15a4c44c8 · 2025-04-29T20:07:28.000+08:00
- Added onAnimationComplete handler to dismiss modals after exit animation.
- Refactored modal stack update logic to remove unnecessary nextFrame call.
- Introduced delay for masonry rendering in recommendations to prevent layout shifts and improve user experience.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/custom-modal.tsx b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/custom-modal.tsx
@@ -28,6 +28,11 @@ export const SlideUpModal: ModalTemplateType = (props) => {
           y: winHeight,
           opacity: 0,
         }}
+        onAnimationComplete={(definition) => {
+          if (definition === "exit") {
+            dismiss()
+          }
+        }}
         className={cn(
           "bg-theme-background relative flex flex-col items-center overflow-hidden rounded-xl border p-8 pb-0",
           "aspect-[7/9] w-[600px] max-w-full shadow lg:max-h-[calc(100vh-10rem)]",
@@ -63,6 +68,7 @@ const modalVariant = {
     opacity: 0,
   },
 }
+
 export const DrawerModalLayout: FC<PropsWithChildren> = ({ children }) => {
   const { dismiss } = useCurrentModal()
   const controller = useAnimationControls()
@@ -84,6 +90,11 @@ export const DrawerModalLayout: FC<PropsWithChildren> = ({ children }) => {
           tension: 100,
           friction: 1,
         }}
+        onAnimationComplete={(definition) => {
+          if (definition === "exit") {
+            dismiss()
+          }
+        }}
         exit="exit"
         layout="size"
         className={cn(
diff --git a/apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/desktop/layer/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -3,7 +3,7 @@ import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typogra
 import { ZIndexProvider } from "@follow/components/ui/z-index/index.js"
 import { useRefValue } from "@follow/hooks"
 import { ELECTRON_BUILD } from "@follow/shared/constants"
-import { nextFrame, preventDefault, stopPropagation } from "@follow/utils/dom"
+import { preventDefault, stopPropagation } from "@follow/utils/dom"
 import { cn, getOS } from "@follow/utils/utils"
 import * as Dialog from "@radix-ui/react-dialog"
 import { produce } from "immer"
@@ -100,9 +100,7 @@ export const ModalInternal = memo(
           setStack((p) => p.filter((modal) => modal.id !== item.id))
         })
       } else {
-        nextFrame(() => {
-          setStack((p) => p.filter((modal) => modal.id !== item.id))
-        })
+        setStack((p) => p.filter((modal) => modal.id !== item.id))
       }
       onPropsClose?.(false)
     })
diff --git a/apps/desktop/layer/renderer/src/modules/discover/recommendations-card.tsx b/apps/desktop/layer/renderer/src/modules/discover/recommendations-card.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@follow/components/ui/card/index.jsx"
+import { SiteIcon } from "@follow/components/ui/icon/SiteIcon.js"
 import { RSSHubCategories } from "@follow/constants"
 import { getHighestWeightColor } from "@follow/utils/color"
 import { clsx, cn, getUrlIcon } from "@follow/utils/utils"
@@ -54,7 +55,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
           <CardTitle className="@[280px]:pt-10 relative z-[1] flex items-center pt-[10px] text-base">
             <span className="center bg-background box-content flex aspect-square rounded-full p-1.5">
               <span className="overflow-hidden rounded-full">
-                <FeedIcon size={28} noMargin siteUrl={`https://${data.url}`} />
+                <SiteIcon size={28} siteUrl={`https://${data.url}`} />
               </span>
             </span>
             <a
diff --git a/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx b/apps/desktop/layer/renderer/src/modules/discover/recommendations.tsx
@@ -2,15 +2,15 @@ import { isMobile } from "@follow/components/hooks/useMobile.js"
 import { EmptyIcon } from "@follow/components/icons/empty.js"
 import { ActionButton } from "@follow/components/ui/button/action-button.js"
 import { Card, CardContent } from "@follow/components/ui/card/index.jsx"
-import { Divider } from "@follow/components/ui/divider/Divider.js"
 import { LoadingCircle } from "@follow/components/ui/loading/index.js"
-import { Masonry } from "@follow/components/ui/masonry/index.js"
 import { ScrollArea } from "@follow/components/ui/scroll-area/ScrollArea.js"
 import { ResponsiveSelect } from "@follow/components/ui/select/responsive.js"
 import { CategoryMap, RSSHubCategories } from "@follow/constants"
+import { nextFrame } from "@follow/utils/dom"
 import { isASCII } from "@follow/utils/utils"
 import { keepPreviousData } from "@tanstack/react-query"
-import { useMemo, useState } from "react"
+import { Masonry } from "masonic"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { flushSync } from "react-dom"
 import { useTranslation } from "react-i18next"
 
@@ -95,19 +95,25 @@ export function Recommendations() {
     })
   }, [data])
 
-  const handleCategoryChange = (value: DiscoverCategories) => {
-    flushSync(() => {
-      setCategory(value)
-    })
-    rsshubPopular.refetch()
-  }
+  const handleCategoryChange = useCallback(
+    (value: DiscoverCategories) => {
+      flushSync(() => {
+        setCategory(value)
+      })
+      rsshubPopular.refetch()
+    },
+    [rsshubPopular],
+  )
 
-  const handleLangChange = (value: string) => {
-    flushSync(() => {
-      setSelectedLang(value as Language)
-    })
-    rsshubPopular.refetch()
-  }
+  const handleLangChange = useCallback(
+    (value: string) => {
+      flushSync(() => {
+        setSelectedLang(value as Language)
+      })
+      rsshubPopular.refetch()
+    },
+    [rsshubPopular],
+  )
 
   const handleShowCategoryContent = (selectedCategory: DiscoverCategories) => {
     present({
@@ -222,6 +228,16 @@ const RecommendationDrawerContent = ({
 
   const { dismiss } = useCurrentModal()
 
+  // Delay the masonry rendering to avoid layout shift
+  const [ready, setReady] = useState(false)
+  const [masonryReady, setMasonryReady] = useState(false)
+
+  useEffect(() => {
+    nextFrame(() => {
+      setReady(true)
+    })
+  }, [])
+
   return (
     <div className="absolute inset-0 flex flex-col">
       <h1 className="text-title2 mt-4 pl-8 font-semibold">
@@ -236,27 +252,34 @@ const RecommendationDrawerContent = ({
       >
         <i className="i-mgc-close-cute-re" />
       </ActionButton>
-      <Divider className="m-4" />
+      <div className="bg-border m-4 h-px shrink-0" />
       {filteredItems.length > 0 ? (
-        <ScrollArea rootClassName="w-full" viewportClassName="px-8">
-          <Masonry
-            items={filteredItems}
-            columnGutter={16}
-            columnWidth={280}
-            columnCount={isMobile() ? 1 : 2}
-            overscanBy={2}
-            render={({ data: itemData }) => {
-              if (!itemData) return null
-              return (
-                <RecommendationCard
-                  key={itemData.key}
-                  data={itemData.data}
-                  routePrefix={itemData.routePrefix}
-                  setCategory={handleCategoryChange}
-                />
-              )
-            }}
-          />
+        <ScrollArea rootClassName="w-full -mt-4" viewportClassName="px-8 pt-4">
+          {ready && (
+            <Masonry
+              className={masonryReady ? "opacity-100" : "opacity-0"}
+              items={filteredItems}
+              columnGutter={16}
+              onRender={() => {
+                setTimeout(() => {
+                  setMasonryReady(true)
+                }, 36)
+              }}
+              columnCount={isMobile() ? 1 : 2}
+              overscanBy={2}
+              render={({ data: itemData }) => {
+                if (!itemData) return null
+                return (
+                  <RecommendationCard
+                    key={itemData.key}
+                    data={itemData.data}
+                    routePrefix={itemData.routePrefix}
+                    setCategory={handleCategoryChange}
+                  />
+                )
+              }}
+            />
+          )}
         </ScrollArea>
       ) : (
         <div className="flex h-full -translate-y-12 flex-col items-center justify-center text-center">
diff --git a/packages/internal/components/src/ui/icon/SiteIcon.tsx b/packages/internal/components/src/ui/icon/SiteIcon.tsx
@@ -0,0 +1,53 @@
+import { getFeedIconSrc } from "@follow/components/utils/icon"
+import { cn } from "@follow/utils/utils"
+import { m, useAnimationControls } from "motion/react"
+import { useRef } from "react"
+
+import { PlatformIcon } from "../platform-icon"
+
+interface SiteIconProps {
+  siteUrl: string
+  className?: string
+  size?: number
+  fadeIn?: boolean
+}
+export const SiteIcon = ({ siteUrl, className, size = 20, fadeIn = true }: SiteIconProps) => {
+  const [src] = getFeedIconSrc({
+    siteUrl,
+  })
+
+  const sizeStyle = {
+    width: size,
+    height: size,
+  }
+
+  const isIconLoaded = useRef(false)
+  const fadeInVariant = {
+    opacity: [0, 1],
+    transition: {
+      duration: 0.2,
+    },
+  }
+
+  const animateControl = useAnimationControls()
+  return (
+    <PlatformIcon url={siteUrl} style={sizeStyle} className={cn("center", className)}>
+      <m.img
+        style={sizeStyle}
+        src={src}
+        animate={animateControl}
+        onLoad={() => {
+          if (isIconLoaded.current) {
+            return
+          }
+          if (!fadeIn) {
+            isIconLoaded.current = true
+            return
+          }
+          isIconLoaded.current = true
+          animateControl.start(fadeInVariant)
+        }}
+      />
+    </PlatformIcon>
+  )
+}
