@bbki.ng/site 5.8.5 → 5.8.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @bbki.ng/site
 
+## 5.8.6
+
+### Patch Changes
+
+- b578955: add transition to arrow
+
 ## 5.8.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "5.8.5",
+  "version": "5.8.6",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "type": "module",

package/src/plugins/store/components/ArrowCom.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { IComPropsRegisteredToSlot } from '#/types/slots';
 
@@ -7,9 +7,28 @@ import { ArrowSvg } from './ArrowSvg';
 export const ArrowCom: FC<IComPropsRegisteredToSlot> = ({ data }) => {
   const hasEntry = data as boolean;
 
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Delay one frame so the initial opacity:0 is painted first
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
   if (hasEntry) {
     return null;
   }
 
-  return <ArrowSvg />;
+  // transition from opacity 0 to 1 when hasEntry changes from true to false
+
+  return (
+    <div
+      style={{
+        opacity: visible ? 1 : 0,
+        transition: 'opacity 1s ease-in',
+      }}
+    >
+      <ArrowSvg />
+    </div>
+  );
 };