make fetch_components_list a background event

Author: carlosabadia

pcweb/pages/docs/custom_components.py

@@ -34,8 +34,8 @@ class CustomComponentGalleryState(rx.State):
     # Added available limits for the number of items per page
     limits: list[str] = ["10", "20", "50", "100"]
 
-    @rx.event
-    def fetch_components_list(self):
+    @rx.event(background=True)
+    async def fetch_components_list(self):
         try:
             response = httpx.get(
                 f"{os.getenv('RCC_ENDPOINT')}/custom-components/gallery"
@@ -55,12 +55,13 @@ def fetch_components_list(self):
             ]
             c["download_url"] = package_url(c["package_name"])
 
-        self.original_components_list = component_list
-        self.number_of_rows = len(component_list)
-        self.total_pages = (
-            self.number_of_rows + self.current_limit - 1
-        ) // self.current_limit
-        self.paginate()
+        async with self:
+            self.original_components_list = component_list
+            self.number_of_rows = len(component_list)
+            self.total_pages = (
+                self.number_of_rows + self.current_limit - 1
+            ) // self.current_limit
+            self.paginate()
 
     @rx.event
     def paginate(self) -> None: