From 6f9492ef12855266993a64d5089eba1db5e4ece8 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 12 Aug 2024 11:07:36 +0200
Subject: [PATCH] fix: don't always fetch all flags on project flag screen
 (#7834)

There's a bug where the UI will fetch all features every time you load a
project screen (including every time you filter the project results).

The reason is that the create flag dialog was rendered (just not open)
every time. To solve it, we instead wrap it in an extra component that
prevents all the fetching and setup from running when the dialog isn't
open.

Additionally, we'll lower the page size for the global fetch limit to 1,
so that we send less data.
---
 .../CreateFeatureDialog.tsx                         | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index bfb33730cce5..a137c49eda5a 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -79,6 +79,17 @@ const configButtonData = {
 export const CreateFeatureDialog = ({
     open,
     onClose,
+}: ICreateFeatureDialogProps) => {
+    if (open) {
+        // wrap the inner component so that we only fetch data etc
+        // when the dialog is actually open.
+        return <CreateFeatureDialogContent open={open} onClose={onClose} />;
+    }
+};
+
+const CreateFeatureDialogContent = ({
+    open,
+    onClose,
 }: ICreateFeatureDialogProps) => {
     const { setToastData, setToastApiError } = useToast();
     const { setShowFeedback } = useContext(UIContext);
@@ -158,7 +169,7 @@ export const CreateFeatureDialog = ({
     };
 
     const { total: totalFlags, loading: loadingTotalFlagCount } =
-        useGlobalFeatureSearch();
+        useGlobalFeatureSearch(1);
 
     const { project: projectInfo } = useProjectOverview(project);
     const { tags: allTags } = useAllTags();