🐛 fix(custom): 修复跳转到图片页面时页面偏移问题

EOEFANS · Mar 16, 2023 · 6582a13 · 6582a13
1 parent aa3c065
commit 6582a13
Showing 1 changed file with 20 additions and 23 deletions.
diff --git a/src/routers/photo/masonry.tsx b/src/routers/photo/masonry.tsx
@@ -80,38 +80,35 @@ export default function Masonry(props: PhotoRouterMasonryType) {
 
   return (
     <div className={styles["container"]}>
-      <Fade in={!isLoading} className={`${!isLoading ? "" : "hidden"}`}>
-        <div>
-          {!isLoading && (
+      {isLoading ? (
+        <Fade in={isLoading}>
+          <div>
             <Masonic_masonry
-              items={lists}
+              items={loadingLists}
               maxColumnCount={5}
               {...minCount}
               columnGutter={md ? 5 : 10}
               rowGutter={md ? 5 : 10}
               columnWidth={200}
-              render={PhotoCard}
+              render={PhotoLoadingItem}
               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>
+        </Fade>
+      ) : (
+        <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>
   );
 }