feat: lazy load of the yaml library components

Author: maxy-shpfy

src/components/shared/FavoriteComponentToggle.tsx

@@ -1,22 +1,32 @@
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import { PackagePlus, Star } from "lucide-react";
-import type { MouseEvent, PropsWithChildren } from "react";
+import type { ComponentProps, MouseEvent, PropsWithChildren } from "react";
 import { useCallback, useMemo, useState } from "react";
 
 import { ConfirmationDialog } from "@/components/shared/Dialogs";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
+import { Spinner } from "@/components/ui/spinner";
+import { useGuaranteedHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
 import { hydrateComponentReference } from "@/services/componentService";
 import type { ComponentReference } from "@/utils/componentSpec";
 import { getComponentName } from "@/utils/getComponentName";
+import { getComponentById } from "@/utils/localforage";
+
+import { withSuspenseWrapper } from "./SuspenseWrapper";
 
 interface ComponentFavoriteToggleProps {
   component: ComponentReference;
   hideDelete?: boolean;
 }
 
-interface StateButtonProps {
+interface StateButtonProps extends ComponentProps<typeof Button> {
   active?: boolean;
   isDanger?: boolean;
   onClick?: () => void;
@@ -27,6 +37,7 @@ const IconStateButton = ({
   isDanger = false,
   onClick,
   children,
+  ...props
 }: PropsWithChildren<StateButtonProps>) => {
   const handleFavorite = useCallback(
     (e: MouseEvent) => {
@@ -51,6 +62,7 @@ const IconStateButton = ({
       )}
       variant="ghost"
       size="icon"
+      {...props}
     >
       {children}
     </Button>
@@ -84,28 +96,59 @@ const DeleteFromLibraryButton = ({ active, onClick }: StateButtonProps) => {
   );
 };
 
+const favoriteComponentKey = (component: ComponentReference) => {
+  return ["component", "is-favorite", component.digest];
+};
+
+const FavoriteToggleButton = withSuspenseWrapper(
+  ({ component }: { component: ComponentReference }) => {
+    const queryClient = useQueryClient();
+
+    const { setComponentFavorite } = useComponentLibrary();
+    const hydratedComponent = useGuaranteedHydrateComponentReference(component);
+
+    const { data: isFavorited } = useSuspenseQuery({
+      queryKey: favoriteComponentKey(component),
+      queryFn: async () =>
+        (await getComponentById(`component-${hydratedComponent.digest}`))
+          ?.favorited ?? false,
+    });
+
+    const { mutate: setFavorite } = useMutation({
+      mutationFn: async () =>
+        setComponentFavorite(hydratedComponent, !isFavorited),
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: favoriteComponentKey(hydratedComponent),
+        });
+      },
+    });
+
+    return <FavoriteStarButton active={isFavorited} onClick={setFavorite} />;
+  },
+  () => <Spinner size={10} />,
+  () => (
+    <IconStateButton disabled>
+      <Icon name="Star" />
+    </IconStateButton>
+  ),
+);
+
 export const ComponentFavoriteToggle = ({
   component,
   hideDelete = false,
 }: ComponentFavoriteToggleProps) => {
   const {
     addToComponentLibrary,
     removeFromComponentLibrary,
-    checkIfFavorited,
     checkIfUserComponent,
     checkLibraryContainsComponent,
-    setComponentFavorite,
   } = useComponentLibrary();
 
   const [isOpen, setIsOpen] = useState(false);
 
   const { spec, url } = component;
 
-  const isFavorited = useMemo(
-    () => checkIfFavorited(component),
-    [component, checkIfFavorited],
-  );
-
   const isUserComponent = useMemo(
     () => checkIfUserComponent(component),
     [component, checkIfUserComponent],
@@ -121,10 +164,6 @@ export const ComponentFavoriteToggle = ({
     [spec, url],
   );
 
-  const onFavorite = useCallback(() => {
-    setComponentFavorite(component, !isFavorited);
-  }, [isFavorited, setComponentFavorite]);
-
   // Delete User Components
   const handleDelete = useCallback(async () => {
     removeFromComponentLibrary(component);
@@ -166,7 +205,7 @@ export const ComponentFavoriteToggle = ({
       {!isInLibrary && <AddToLibraryButton onClick={openConfirmationDialog} />}
 
       {isInLibrary && !isUserComponent && (
-        <FavoriteStarButton active={isFavorited} onClick={onFavorite} />
+        <FavoriteToggleButton component={component} />
       )}
 
       {showDeleteButton && (

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -93,6 +93,9 @@ type ComponentLibraryContextType = {
     component: ComponentReference,
     favorited: boolean,
   ) => void;
+  /**
+   * @deprecated
+   */
   checkIfFavorited: (component: ComponentReference) => boolean;
   checkIfUserComponent: (component: ComponentReference) => boolean;
   checkLibraryContainsComponent: (component: ComponentReference) => boolean;
@@ -230,9 +233,7 @@ export const ComponentLibraryProvider = ({
     const { data: updatedLibrary } = await refetchLibrary();
 
     if (updatedLibrary) {
-      populateComponentRefs(updatedLibrary).then((result) => {
-        setComponentLibrary(result);
-      });
+      setComponentLibrary(updatedLibrary);
     }
   }, [refetchLibrary]);
 
@@ -571,9 +572,7 @@ export const ComponentLibraryProvider = ({
       setComponentLibrary(undefined);
       return;
     }
-    populateComponentRefs(rawComponentLibrary).then((result) => {
-      setComponentLibrary(result);
-    });
+    setComponentLibrary(rawComponentLibrary);
   }, [rawComponentLibrary]);
 
   useEffect(() => {

src/services/componentService.ts

@@ -1,6 +1,5 @@
 import { getAppSettings } from "@/appSettings";
 import {
-  type ComponentFolder,
   type ComponentLibrary,
   isValidComponentLibrary,
 } from "@/types/componentLibrary";
@@ -112,36 +111,9 @@ export const fetchAndStoreComponentLibrary =
       updatedAt: Date.now(),
     });
 
-    // Also store individual components for future reference
-    await storeComponentsFromLibrary(obj);
-
     return obj;
   };
 
-/**
- * Store all components from the library in local storage
- */
-const storeComponentsFromLibrary = async (
-  library: ComponentLibrary,
-): Promise<void> => {
-  const processFolder = async (folder: ComponentFolder) => {
-    // Store each component in the folder
-    for (const component of folder.components || []) {
-      await fetchAndStoreComponent(component);
-    }
-
-    // Process subfolders recursively
-    for (const subfolder of folder.folders || []) {
-      await processFolder(subfolder);
-    }
-  };
-
-  // Process all top-level folders
-  for (const folder of library.folders) {
-    await processFolder(folder);
-  }
-};
-
 /**
  * Fetch and store a single component by URL
  */