fix: Only fetch groups when it is enabled (#5753)

site/src/pages/GroupsPage/GroupsPage.tsx

@@ -10,14 +10,15 @@ import GroupsPageView from "./GroupsPageView"
 
 export const GroupsPage: FC = () => {
   const organizationId = useOrganizationId()
+  const { createGroup: canCreateGroup } = usePermissions()
+  const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility()
   const [state] = useMachine(groupsMachine, {
     context: {
       organizationId,
+      shouldFetchGroups: isTemplateRBACEnabled,
     },
   })
   const { groups } = state.context
-  const { createGroup: canCreateGroup } = usePermissions()
-  const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility()
 
   return (
     <>

site/src/xServices/groups/groupsXService.ts

@@ -11,6 +11,7 @@ export const groupsMachine = createMachine(
     schema: {
       context: {} as {
         organizationId: string
+        shouldFetchGroups: boolean
         groups?: Group[]
       },
       services: {} as {
@@ -23,6 +24,7 @@ export const groupsMachine = createMachine(
     initial: "loading",
     states: {
       loading: {
+        always: [{ target: "idle", cond: "cantFetchGroups" }],
         invoke: {
           src: "loadGroups",
           onDone: {
@@ -39,6 +41,9 @@ export const groupsMachine = createMachine(
     },
   },
   {
+    guards: {
+      cantFetchGroups: ({ shouldFetchGroups }) => !shouldFetchGroups,
+    },
     services: {
       loadGroups: ({ organizationId }) => getGroups(organizationId),
     },