@bbki.ng/site 1.8.5 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.8.7
+
+## 1.8.6
+
 ## 1.8.5
 
 ## 1.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@extism/extism": "2.0.0-rc11",
-    "@bbki.ng/components": "workspace:2.6.4",
+    "@bbki.ng/components": "workspace:2.6.5",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/blog/components/article/index.tsx

@@ -3,6 +3,7 @@ import { Tags, Article } from "@bbki.ng/components";
 import { ROUTES } from "@/constants";
 import classNames from "classnames";
 import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 export type ArticlePageProps = {
   tags?: string[];
@@ -13,26 +14,9 @@ export type ArticlePageProps = {
   children: ReactElement;
 };
 
-const useSafeArticleLoading = (safeSec: number) => {
-  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
-  const [isArticleLoading, setIsArticleLoading] = React.useState(true);
-
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setIsArticleLoading(false);
-    }, safeSec * 1000);
-
-    return () => {
-      clearTimeout(id);
-    };
-  }, []);
-
-  return isLoading || isFontLoading || isArticleLoading;
-};
-
 export const ArticlePage = (props: ArticlePageProps) => {
   const { tags: tagNames, title, description, headless } = props;
-  const loading = useSafeArticleLoading(0.2);
+  const loading = useSafeArticleLoading(0.2, 5);
   const tags = tagNames
     ? tagNames.map((t) => ({ children: t, to: `${ROUTES.TAGS}/${t}` }))
     : [];

package/src/blog/components/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { LinkList } from "@bbki.ng/components";
+import { BlurCover } from "@bbki.ng/components";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
 
 export { DisabledText, SmallDisabledText } from "./disabled_text";
@@ -30,10 +31,9 @@ export { MySuspense } from "./my_suspense";
 
 export const CenterLinkList = (props: any) => {
   return (
-    <div className="flex justify-center">
-      <DelayFadeIn delay={200}>
-        <LinkList {...props} />
-      </DelayFadeIn>
+    <div className="flex justify-center relative p-16">
+      <LinkList {...props} />
+      <BlurCover status={props.loading ? "show" : "silent"} />
     </div>
   );
 };

package/src/blog/components/plugin/PluginRoutes.tsx

@@ -2,12 +2,22 @@ import { threeColWrapper } from "@/components/with_wrapper";
 import { CenterLinkList } from "@/components";
 import React, { useContext } from "react";
 import { GlobalRoutesContext } from "@/context/global_routes_provider";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 const PluginRoutesContent = () => {
   const globalRouteCtx = useContext(GlobalRoutesContext);
   const routes = globalRouteCtx.globalRoutes;
 
-  return <CenterLinkList className="select-none" links={routes} title="" />;
+  const isLoading = useSafeArticleLoading(0.2, 3);
+
+  return (
+    <CenterLinkList
+      className="select-none"
+      links={routes}
+      title=""
+      loading={isLoading}
+    />
+  );
 };
 
 export const PluginRoutes = threeColWrapper(PluginRoutesContent);

package/src/blog/hooks/use_font_loading.ts

@@ -27,6 +27,10 @@ export const useFontLoading = () => {
     document.fonts.onloadingerror = handleFontLoadingError;
     document.fonts.onloading = handleFontLoading;
 
+    document.fonts.ready.then(() => {
+      handleFontLoadingDone();
+    });
+
     return () => {
       document.fonts.onloadingerror = null;
       document.fonts.onloading = null;

package/src/blog/hooks/use_safe_loading.ts

@@ -0,0 +1,29 @@
+import React, { useContext, useEffect } from "react";
+import { GlobalLoadingContext } from "@/context/global_loading_state_provider";
+
+export const useSafeArticleLoading = (safeSec: number, timeOutSec: number) => {
+  const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
+  const [isArticleLoading, setIsArticleLoading] = React.useState(true);
+  const [isTimeout, setIsTimeout] = React.useState(false);
+
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setIsArticleLoading(false);
+    }, safeSec * 1000);
+
+    const timeoutId = setTimeout(() => {
+      setIsTimeout(true);
+    }, timeOutSec * 1000);
+
+    return () => {
+      clearTimeout(id);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  if (isTimeout) {
+    return false;
+  }
+
+  return isLoading || isFontLoading || isArticleLoading;
+};

package/src/blog/pages/extensions/txt/index.tsx

@@ -6,6 +6,7 @@ import { CenterLinkList } from "@/components";
 import { useAuthed } from "@/hooks/use_authed";
 import { useFile2Post } from "@/hooks/use_file_to_post";
 import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
+import { useSafeArticleLoading } from "@/hooks/use_safe_loading";
 
 type TxtProps = {
   title?: string;
@@ -15,6 +16,8 @@ type TxtProps = {
 const Posts = (props: TxtProps) => {
   const { titleList, isLoading, isError } = usePosts();
 
+  const isGlobalLoading = useSafeArticleLoading(0.2, 5);
+
   if (isLoading) {
     return null;
   }
@@ -25,7 +28,12 @@ const Posts = (props: TxtProps) => {
 
   const links = [...titleList, ...ArticleList];
 
-  return <CenterLinkList links={props.articleList || links} />;
+  return (
+    <CenterLinkList
+      links={props.articleList || links}
+      loading={isGlobalLoading}
+    />
+  );
 };
 
 export default (props: TxtProps) => {