Fix API key management and heart and add buttons

src/frontend/src/components/cardComponent/index.tsx

@@ -251,7 +251,7 @@ export default function CollectionCardComponent({
                   content={authorized ? "Like" : "Please review your API key."}
                 >
                   <Button
-                    disabled={loadingLike || !authorized}
+                    disabled={loadingLike}
                     variant="ghost"
                     size="xs"
                     className={
@@ -282,11 +282,13 @@ export default function CollectionCardComponent({
                   }
                 >
                   <Button
+                    disabled={loading}
                     variant="ghost"
                     size="xs"
                     className={
                       "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "")
+                      (!authorized ? " cursor-not-allowed" : "") +
+                      (!loading ? " p-0.5" : "")
                     }
                     onClick={() => {
                       if (loading || !authorized) {
@@ -298,7 +300,7 @@ export default function CollectionCardComponent({
                     <IconComponent
                       name={loading ? "Loader2" : "Plus"}
                       className={classNames(
-                        loading ? "h-5 w-5 animate-spin" : "h-6 w-6 p-0.5",
+                        loading ? "h-5 w-5 animate-spin" : "h-6 w-6",
                         !authorized ? " text-ring" : ""
                       )}
                     />

src/frontend/src/contexts/storeContext.tsx

@@ -53,7 +53,7 @@ export function StoreProvider({ children }) {
 
   useEffect(() => {
     fetchApiData();
-  }, [storeChecked, validApiKey, apiKey]);
+  }, [storeChecked, apiKey]);
 
   return (
     <StoreContext.Provider

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -14,7 +14,7 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
   const [open, setOpen] = useState(false);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { storeApiKey } = useContext(AuthContext);
-  const { hasApiKey, setHasApiKey, validApiKey } = useContext(StoreContext);
+  const { hasApiKey, validApiKey } = useContext(StoreContext);
   const [apiKeyValue, setApiKeyValue] = useState("");
 
   const handleSaveKey = () => {
@@ -25,7 +25,6 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
             title: "Success! Your API Key has been saved.",
           });
           storeApiKey(apiKeyValue);
-          setHasApiKey(true);
           setOpen(false);
         },
         (error) => {

src/frontend/src/pages/StorePage/index.tsx

@@ -90,7 +90,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
-    if (!hasApiKey) return;
+    if (!hasApiKey || loadingApiKey) return;
     setLoading(true);
     getStoreComponents({
       page: pageIndex,