Move GridRep/Collection and add fade in

components/reps/GridRep/index.module.scss

@@ -9,6 +9,16 @@
   padding: $unit-2x;
   min-width: 320px;
   width: 100%;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+
+  &.visible {
+    opacity: 1;
+  }
+
+  &.hidden {
+    opacity: 0;
+  }
 
   &:hover {
     background: var(--grid-rep-hover);

components/reps/GridRep/index.tsx

@@ -40,10 +40,16 @@ const GridRep = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  const [visible, setVisible] = useState(false)
   const [mainhand, setMainhand] = useState<Weapon>()
   const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
   const [grid, setGrid] = useState<GridArray<GridWeapon>>({})
 
+  const gridRepStyles = classNames({
+    [styles.gridRep]: true,
+    [styles.visible]: visible,
+    [styles.hidden]: !visible,
+  })
   const titleClass = classNames({
     empty: !props.name,
   })
@@ -68,6 +74,14 @@ const GridRep = (props: Props) => {
     [styles.grid]: true,
   })
 
+  useEffect(() => {
+    setVisible(false) // Trigger fade out
+    const timeout = setTimeout(() => {
+      setVisible(true) // Trigger fade in
+    }, 300) // You can adjust the timing based on your preference
+    return () => clearTimeout(timeout)
+  }, [])
+
   useEffect(() => {
     const newWeapons = Array(numWeapons)
     const gridWeapons = Array(numWeapons)
@@ -249,7 +263,7 @@ const GridRep = (props: Props) => {
 
   return (
     <Link legacyBehavior href={`/p/${props.shortcode}`}>
-      <a className={styles.gridRep}>
+      <a className={gridRepStyles}>
         {detailsWithUsername}
         <div className={styles.weaponGrid}>
           <div className={mainhandClasses}>{generateMainhandImage()}</div>