@bbki.ng/site 5.8.4 → 5.8.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bbki.ng/site
 
+## 5.8.6
+
+### Patch Changes
+
+- b578955: add transition to arrow
+
+## 5.8.5
+
+### Patch Changes
+
+- 6b14c28: add empty placeholder
+
 ## 5.8.4
 
 ### Patch Changes

package/package.json

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

package/src/app/components/cover/index.tsx

@@ -3,6 +3,8 @@ import { LinkProps, LinkListProps, LinkList } from '@bbki.ng/ui';
 
 import { usePluginEntries } from '#/app/hooks/use_plugin_entries';
 import { useMiddlewareTransformedData } from '#/core/hooks/useMiddlewareTransData';
+import { Slot } from '#/core/components/SlotComp';
+import { useGlobalLoading } from '#/app/hooks/use_global_loading';
 
 const CenterLinkList = (props: LinkListProps) => {
   return (
@@ -29,9 +31,13 @@ export const Cover = (_: { className?: string }) => {
     entries
   ) as Array<LinkProps>;
 
+  const { isLoading } = useGlobalLoading();
+  const hasEntries = pluginEntries.length > 1 && !isLoading;
+
   return (
     <>
       <CenterLinkList className="select-none" links={transformedEntries} />
+      <Slot name="centerEntryArea" data={hasEntries} />
     </>
   );
 };

package/src/app/hooks/use_plugin_entries.ts

@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { SystemUIService } from '#/core/plugin-system/services/systemUIService';
 import { IPluginEntry } from '#/types/plugin';
 
 const protectedRoutesSet = new Set<string>(['/bot', '/', 'default']);
 
+const emptyEntries: Array<IPluginEntry> = [];
+
 export const usePluginEntries = () => {
   const [entries, setEntries] = useState<Array<IPluginEntry>>(() =>
     SystemUIService.getInstance().getPluginEntries()
@@ -23,7 +25,10 @@ export const usePluginEntries = () => {
     };
   }, []);
 
-  const safeEntries = entries?.filter(entry => !protectedRoutesSet.has(entry.path));
+  const safeEntries = useMemo(
+    () => entries?.filter(entry => !protectedRoutesSet.has(entry.path)),
+    [entries]
+  );
 
-  return safeEntries ?? [];
+  return safeEntries ?? emptyEntries;
 };

package/src/core/hooks/use_plugins.ts

@@ -43,13 +43,23 @@ export const usePlugins = () => {
 
   const installedPlugins = PluginStore.getInstance().getInstalledPlugins();
 
+  const { setGlobalLoading } = useGlobalLoading();
+
   const pluginIds: Array<PluginID> = useMemo(
-    () => ['store', ...Array.from(installedPlugins)],
+    () => [...Array.from(installedPlugins), 'store'],
     [installedPlugins]
   );
 
   usePluginsLoading();
 
+  useEffect(() => {
+    const unregister = setGlobalLoading('plugins', !done);
+
+    return () => {
+      unregister();
+    };
+  }, [done, setGlobalLoading]);
+
   useEffect(() => {
     let cancelled = false;
 

package/src/core/shared-service/contract/IUIService.ts

@@ -38,7 +38,13 @@ export interface IBaseUIService<T extends string, K extends string> {
   runMiddlewares: <S>(point: K, data: S) => Promise<S>;
 }
 
-export type SystemSlotName = 'leftCol' | 'rightCol' | 'logo' | 'pageFooter' | 'nav-right';
+export type SystemSlotName =
+  | 'leftCol'
+  | 'rightCol'
+  | 'logo'
+  | 'pageFooter'
+  | 'nav-right'
+  | 'centerEntryArea';
 
 export type SystemDataHookPoint = 'transformBreadcrumbPath' | 'transformEntryLink';
 

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

@@ -0,0 +1,34 @@
+import { FC, useEffect, useState } from 'react';
+
+import { IComPropsRegisteredToSlot } from '#/types/slots';
+
+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;
+  }
+
+  // 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>
+  );
+};