From a7f8152b7b77fd3129d25984949e21a63235978a Mon Sep 17 00:00:00 2001
From: master1lan <278457198@qq.com>
Date: Thu, 16 Mar 2023 11:52:02 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20feat(custom):=20=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A1=B5=E6=B7=BB=E5=8A=A0=E8=BF=87=E6=B8=A1=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #50
---
 src/routers/photo/item/index.tsx       |  1 +
 src/routers/photo/item/loadingItem.tsx | 18 +++++++
 src/routers/photo/masonry.tsx          | 68 +++++++++++++++++++-------
 3 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 src/routers/photo/item/loadingItem.tsx

diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx
index fd93a24..e7ce952 100644
--- a/src/routers/photo/item/index.tsx
+++ b/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%)`,
diff --git a/src/routers/photo/item/loadingItem.tsx b/src/routers/photo/item/loadingItem.tsx
new file mode 100644
index 0000000..70741c4
--- /dev/null
+++ b/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",
+      }}
+    />
+  );
+}
diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx
index 7cf9eed..2bafe37 100644
--- a/src/routers/photo/masonry.tsx
+++ b/src/routers/photo/masonry.tsx
@@ -1,8 +1,8 @@
 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";
@@ -10,8 +10,9 @@ 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>
   );
 }