⚡ feat(custom): 图片页添加过渡效果

ISSUES CLOSED: #50

src/routers/photo/item/index.tsx

@@ -73,6 +73,7 @@ const DivJump = styled("div")(({ theme }) => ({
   position: "absolute",
   bottom: "0px",
   width: "100%",
+
   backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(90, 90,90, 0.8) 100%)`,
   "&:hover": {
     backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0,0, 0.8) 100%)`,

src/routers/photo/item/loadingItem.tsx

@@ -0,0 +1,18 @@
+import Skeleton from "@mui/material/Skeleton";
+import React from "react";
+import { PhotoMasonryLoadingItemType } from "../masonry";
+type CardType = {
+  data: PhotoMasonryLoadingItemType;
+};
+export default function PhotoLoadingItem(props: CardType) {
+  return (
+    <Skeleton
+      variant='rounded'
+      animation='wave'
+      {...props.data}
+      sx={{
+        width: "100% !important",
+      }}
+    />
+  );
+}

src/routers/photo/masonry.tsx

@@ -1,17 +1,18 @@
 import { selectPhotoLoadingState } from "@store/loading";
 import { Masonry as Masonic_masonry } from "masonic";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useAppSelector, useAppDispatch } from "@store/hooks";
-
+import Fade from "@mui/material/Fade";
 import { changeLoading } from "@store/loading/index";
 import { fetchPhotoHandler } from "./tools";
 import { PhotoRouterImageCardType, PhotoRouterMasonryType } from "./phototype";
 import PhotoCard from "./item";
 import { useScreenSize } from "@components/proview/screenSize";
 import message from "@components/message";
 import styles from "./photo.module.less";
-//todo props type change
-export default function Masonry(props: PhotoRouterMasonryType) {
+import PhotoLoadingItem from "./item/loadingItem";
+
+const usePhotoMasonryData = (props: PhotoRouterMasonryType) => {
   const [lists, setList] = useState<PhotoRouterImageCardType[]>([]);
   const isLoading = useAppSelector(selectPhotoLoadingState),
     dispatch = useAppDispatch(),
@@ -61,23 +62,56 @@ export default function Masonry(props: PhotoRouterMasonryType) {
     handerChangeLoading(true);
     fetchHandler(1).then(() => handerChangeLoading(false));
   }, [props]);
+  return { lists, isLoading };
+};
+export type PhotoMasonryLoadingItemType = Record<"width" | "height", number>;
+export default function Masonry(props: PhotoRouterMasonryType) {
+  const { lists, isLoading } = usePhotoMasonryData(props);
   const { sm, md } = useScreenSize(),
     minCount = sm ? { columnCount: 2 } : {};
+  const loadingLists = useMemo(
+    () =>
+      Array.from({ length: 20 }, () => ({
+        width: 250,
+        height: Math.round(Math.random() * 300 + 100),
+      })),
+    [props]
+  );
+
   return (
     <div className={styles["container"]}>
-      {isLoading || (
-        <Masonic_masonry
-          items={lists}
-          maxColumnCount={5}
-          {...minCount}
-          columnGutter={md ? 5 : 10}
-          rowGutter={md ? 5 : 10}
-          columnWidth={200}
-          render={PhotoCard}
-          overscanBy={Infinity}
-          className={styles["container"]}
-        />
-      )}
+      <Fade in={!isLoading} className={`${!isLoading ? "" : "hidden"}`}>
+        <div>
+          {!isLoading && (
+            <Masonic_masonry
+              items={lists}
+              maxColumnCount={5}
+              {...minCount}
+              columnGutter={md ? 5 : 10}
+              rowGutter={md ? 5 : 10}
+              columnWidth={200}
+              render={PhotoCard}
+              overscanBy={Infinity}
+              className={styles["container"]}
+            />
+          )}
+        </div>
+      </Fade>
+      <Fade in={isLoading} className={`${isLoading ? "" : "hidden"}`}>
+        <div>
+          <Masonic_masonry
+            items={loadingLists}
+            maxColumnCount={5}
+            {...minCount}
+            columnGutter={md ? 5 : 10}
+            rowGutter={md ? 5 : 10}
+            columnWidth={200}
+            render={PhotoLoadingItem}
+            overscanBy={Infinity}
+            className={styles["container"]}
+          />
+        </div>
+      </Fade>
     </div>
   );
 }