feat: lazy load of the yaml library components (#1556)

## Description

Closes #1306

Contributes to Shopify/oasis-frontend#249

Removed the `populateComponentRefs` function call when setting the component library state. Also removed the `storeComponentsFromLibrary` function and its associated logic that was storing individual components in local storage.

## Related Issue and Pull requests

## Type of Change

- [ ] Bug fix
- [ ] New feature
- [x] Improvement
- [x] Cleanup/Refactor
- [ ] Breaking change
- [ ] Documentation update

## Checklist

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

## Test Instructions

[Screen Recording 2025-12-15 at 4.42.24 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/56c6fa34-3963-4dc9-828f-3a761dee6e2e.mov" />](https://app.graphite.com/user-attachments/video/56c6fa34-3963-4dc9-828f-3a761dee6e2e.mov)

1. Open Tangle in "Incokgnito" browser mode. Ensure no lib is available in Application / IndexedDB / components.
2. Create "New Pipeline".
3. Ensure, that Component Library is available almost instantly.
4. Ensure, that Components can be dropped on canvas.
5. Ensure, that you can open "Info" dialog from left panel.

In the video I manually removed "hydration" info (name, author, digest) from the "Quick start" folder to ensure, that Left panel can display "not loaded" libraries.

## Additional Comments

This change simplifies the component library loading process by removing unnecessary processing steps.

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 { isFavoriteComponent } from "@/providers/ComponentLibraryProvider/componentLibrary";
 import { hydrateComponentReference } from "@/services/componentService";
 import type { ComponentReference } from "@/utils/componentSpec";
 import { getComponentName } from "@/utils/getComponentName";
 
+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,57 @@ 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(hydratedComponent),
+      queryFn: async () => isFavoriteComponent(hydratedComponent),
+    });
+
+    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 +162,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 +203,7 @@ export const ComponentFavoriteToggle = ({
       {!isInLibrary && <AddToLibraryButton onClick={openConfirmationDialog} />}
 
       {isInLibrary && !isUserComponent && (
-        <FavoriteStarButton active={isFavorited} onClick={onFavorite} />
+        <FavoriteToggleButton component={component} />
       )}
 
       {showDeleteButton && (

src/providers/ComponentLibraryProvider/ComponentLibraryProvider.tsx

@@ -31,7 +31,7 @@ import {
   updateComponentInListByText,
   updateComponentRefInList,
 } from "@/utils/componentStore";
-import { USER_COMPONENTS_LIST_NAME } from "@/utils/constants";
+import { MINUTES, USER_COMPONENTS_LIST_NAME } from "@/utils/constants";
 import { createPromiseFromDomEvent } from "@/utils/dom";
 import { getComponentName } from "@/utils/getComponentName";
 import {
@@ -48,11 +48,11 @@ import {
 } from "../../hooks/useRequiredContext";
 import { useComponentSpec } from "../ComponentSpecProvider";
 import {
-  fetchFavoriteComponents,
   fetchUsedComponents,
   fetchUserComponents,
   filterToUniqueByDigest,
   flattenFolders,
+  isFavoriteComponent,
   populateComponentRefs,
 } from "./componentLibrary";
 import { useForcedSearchContext } from "./ForcedSearchProvider";
@@ -70,7 +70,7 @@ type ComponentLibraryContextType = {
   componentLibrary: ComponentLibrary | undefined;
   userComponentsFolder: ComponentFolder | undefined;
   usedComponentsFolder: ComponentFolder;
-  favoritesFolder: ComponentFolder;
+  favoritesFolder: ComponentFolder | undefined;
   isLoading: boolean;
   error: Error | null;
   existingComponentLibraries: StoredLibrary[] | undefined;
@@ -93,6 +93,9 @@ type ComponentLibraryContextType = {
     component: ComponentReference,
     favorited: boolean,
   ) => void;
+  /**
+   * @deprecated
+   */
   checkIfFavorited: (component: ComponentReference) => boolean;
   checkIfUserComponent: (component: ComponentReference) => boolean;
   checkLibraryContainsComponent: (component: ComponentReference) => boolean;
@@ -220,21 +223,56 @@ export const ComponentLibraryProvider = ({
   );
 
   // Fetch "Starred" components
-  const favoritesFolder: ComponentFolder = useMemo(
-    () => fetchFavoriteComponents(componentLibrary),
-    [componentLibrary],
+  const { data: favoritesFolderData, refetch: refetchFavorites } = useQuery({
+    queryKey: ["favorites"],
+    queryFn: async () => {
+      const favoritesFolder: ComponentFolder = {
+        name: "Favorite Components",
+        components: [],
+        folders: [],
+        isUserFolder: false,
+      };
+
+      if (!componentLibrary || !componentLibrary.folders) {
+        return favoritesFolder;
+      }
+
+      const uniqueLibraryComponents = filterToUniqueByDigest(
+        flattenFolders(componentLibrary),
+      );
+
+      for (const component of uniqueLibraryComponents) {
+        if (await isFavoriteComponent(component)) {
+          favoritesFolder.components?.push(component);
+        }
+      }
+
+      return favoritesFolder;
+    },
+    enabled: Boolean(componentLibrary),
+    staleTime: 10 * MINUTES,
+  });
+
+  const favoritesFolder = useMemo(
+    () =>
+      favoritesFolderData ?? {
+        name: "Favorite Components",
+        components: [],
+        folders: [],
+        isUserFolder: false,
+      },
+    [favoritesFolderData],
   );
 
   // Methods
   const refreshComponentLibrary = useCallback(async () => {
     const { data: updatedLibrary } = await refetchLibrary();
 
     if (updatedLibrary) {
-      populateComponentRefs(updatedLibrary).then((result) => {
-        setComponentLibrary(result);
-      });
+      setComponentLibrary(updatedLibrary);
+      await refetchFavorites();
     }
-  }, [refetchLibrary]);
+  }, [refetchLibrary, refetchFavorites]);
 
   const refreshUserComponents = useCallback(async () => {
     const { data: updatedUserComponents } = await refetchUserComponents();
@@ -571,9 +609,7 @@ export const ComponentLibraryProvider = ({
       setComponentLibrary(undefined);
       return;
     }
-    populateComponentRefs(rawComponentLibrary).then((result) => {
-      setComponentLibrary(result);
-    });
+    setComponentLibrary(rawComponentLibrary);
   }, [rawComponentLibrary]);
 
   useEffect(() => {

src/providers/ComponentLibraryProvider/componentLibrary.ts

@@ -13,7 +13,7 @@ import {
   getAllComponentFilesFromList,
 } from "@/utils/componentStore";
 import { USER_COMPONENTS_LIST_NAME } from "@/utils/constants";
-import { getComponentByUrl } from "@/utils/localforage";
+import { getComponentById, getComponentByUrl } from "@/utils/localforage";
 import { componentSpecToYaml } from "@/utils/yaml";
 
 export const fetchUserComponents = async (): Promise<ComponentFolder> => {
@@ -80,6 +80,19 @@ export const fetchUsedComponents = (graphSpec: GraphSpec): ComponentFolder => {
   };
 };
 
+export async function isFavoriteComponent(component: ComponentReference) {
+  if (!component.digest) return false;
+
+  const storedComponent = await getComponentById(
+    `component-${component.digest}`,
+  );
+
+  return storedComponent?.favorited ?? false;
+}
+
+/**
+ * @deprecated
+ */
 export const fetchFavoriteComponents = (
   componentLibrary: ComponentLibrary | undefined,
 ): ComponentFolder => {

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
  */