From 5d826e320d7f107f94bd4d140e92d10cde1f87fc Mon Sep 17 00:00:00 2001
From: Gijs <g.min@hbm-machines.com>
Date: Mon, 14 Sep 2026 11:31:12 +0200
Subject: [PATCH] fix: wait for config before rendering feature tables

Since 1.2.0 flagsmithApp is loaded async in IssueFeatureTables but read
synchronously on the first render, which throws on every issue with
linked features. Load it in IssueFeaturesPanel with the other async data
so the ready gate and setError cover it.
---
 .../src/frontend/components/IssueFeatureTables.tsx         | 7 +++----
 .../src/frontend/components/IssueFeaturesPanel.tsx         | 6 +++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/flagsmith-jira-app/src/frontend/components/IssueFeatureTables.tsx b/flagsmith-jira-app/src/frontend/components/IssueFeatureTables.tsx
index 0f684a3..c0d9438 100644
--- a/flagsmith-jira-app/src/frontend/components/IssueFeatureTables.tsx
+++ b/flagsmith-jira-app/src/frontend/components/IssueFeatureTables.tsx
@@ -14,7 +14,6 @@ import {
 import { Fragment, useCallback, useState } from "react";
 
 import { usePromise } from "../../common";
-import { readConfig } from "../flagsmith";
 import {
   Environment,
   EnvironmentFeatureState,
@@ -290,15 +289,15 @@ type IssueFeatureTablesProps = {
   environments: Environment[];
   environmentsFeatures: Feature[][];
   issueFeatureIds: string[];
+  flagsmithApp: string;
 };
 
 const IssueFeatureTables = ({
   environments,
   environmentsFeatures,
   issueFeatureIds,
+  flagsmithApp,
 }: IssueFeatureTablesProps): JSX.Element => {
-  const [config] = usePromise(readConfig, []);
-
   if (
     environmentsFeatures.length === 0 ||
     environmentsFeatures[0] === undefined ||
@@ -334,7 +333,7 @@ const IssueFeatureTables = ({
             <IssueFeatureTable
               environments={matchingEnvironments}
               environmentFeatures={envFeaturesForThisFeature}
-              flagsmithApp={config!.flagsmithApp}
+              flagsmithApp={flagsmithApp}
             />
           </Fragment>
         ),
diff --git a/flagsmith-jira-app/src/frontend/components/IssueFeaturesPanel.tsx b/flagsmith-jira-app/src/frontend/components/IssueFeaturesPanel.tsx
index 29d1c33..207ee9d 100644
--- a/flagsmith-jira-app/src/frontend/components/IssueFeaturesPanel.tsx
+++ b/flagsmith-jira-app/src/frontend/components/IssueFeaturesPanel.tsx
@@ -3,7 +3,7 @@ import { Fragment, useEffect, useState } from "react";
 
 import { ApiError, usePromise } from "../../common";
 import { canEditIssue } from "../auth";
-import { readEnvironments, readFeatures } from "../flagsmith";
+import { readConfig, readEnvironments, readFeatures } from "../flagsmith";
 import { readFeatureIds, readProjectIds, writeFeatureIds } from "../jira";
 
 import { WrappableComponentProps } from "./ErrorWrapper";
@@ -15,6 +15,8 @@ const IssueFeaturesPanel = ({ setError }: WrappableComponentProps): JSX.Element
   const context = useProductContext();
   const extension = context?.extension;
 
+  const [config] = usePromise(readConfig, [], setError);
+
   // get Flagsmith project ID from Jira project
   const [projectIds] = usePromise(
     async () => {
@@ -126,6 +128,7 @@ const IssueFeaturesPanel = ({ setError }: WrappableComponentProps): JSX.Element
 
   const ready =
     extension !== undefined &&
+    config !== undefined &&
     projectIds !== undefined &&
     projectIds.length > 0 &&
     featureIds !== undefined &&
@@ -154,6 +157,7 @@ const IssueFeaturesPanel = ({ setError }: WrappableComponentProps): JSX.Element
         environments={environments}
         environmentsFeatures={environmentsFeatures}
         issueFeatureIds={featureIds}
+        flagsmithApp={config.flagsmithApp}
       />
     </Fragment>
   ) : (