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.

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();