feat(market-card.tsx): add loading state to MarketCardComponent to show loading spinner when adding flow

fix(market-card.tsx): fix typo in cloneFlowWithParent function call
fix(market-card.tsx): set loading state to false after flow is successfully saved
fix(market-card.tsx): set loading state to true when Add to Account button is clicked
fix(market-card.tsx): add animate-spin class to IconComponent when loading state is true
fix(market-card.tsx): change button text to "Install Locally" when flow is already added
feat(styleUtils.ts): add Loader2 icon from lucide-react library

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -18,6 +18,7 @@ import cloneFLowWithParent from "../../../utils/storeUtils";
 
 export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
   const [added, setAdded] = useState(false);
+  const [loading, setLoading] = useState(false);
   const { addFlow } = useContext(TabsContext);
   const flowData = useRef<FlowType>();
 
@@ -25,15 +26,14 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
     getComponent(data.id).then(
       (res) => {
         console.log(res);
-        const newFLow = cloneFLowWithParent(
+        const newFLow = cloneFLowWithParent(res, res.id, data.is_component);
-          res.data,
-          res.id,
-          data.is_component
-        );
         flowData.current = newFLow;
         console.log(newFLow);
         saveFlowStore(newFLow)
-          .then(() => setAdded(true))
+          .then(() => {
+            setAdded(true);
+            setLoading(false);
+          })
           .catch((error) => {
             console.error(error);
           });
@@ -145,6 +145,7 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
               size="sm"
               className="whitespace-nowrap "
               onClick={() => {
+                setLoading(true);
                 if (!added) {
                   handleAdd();
                 } else {
@@ -153,8 +154,12 @@ export const MarketCardComponent = ({ data }: { data: FlowComponent }) => {
               }}
             >
               <IconComponent
-                name={added ? "GitBranchPlus" : "BookmarkPlus"}
+                name={
-                className="main-page-nav-button"
+                  loading ? "Loader2" : added ? "GitBranchPlus" : "BookmarkPlus"
+                }
+                className={
+                  "main-page-nav-button" + (loading ? " animate-spin" : "")
+                }
               />
               {added ? "Install Localy" : "Add to Account"}
             </Button>

src/frontend/src/utils/styleUtils.ts

@@ -46,6 +46,7 @@ import {
   Layers,
   Lightbulb,
   Link,
+  Loader2,
   Lock,
   LucideSend,
   Maximize2,
@@ -331,5 +332,6 @@ export const nodeIconsLucide: iconsType = {
   SaveAll,
   Share2,
   GitBranchPlus,
+  Loader2,
   BookmarkPlus,
 };