feat: Add evaluation options to FeatureFlag component (#1322)

<!-- Please use this template for your pull request. -->
<!-- Please use the sections that you need and delete other sections -->

## This PR
This PR is adding evaluation options to the FeatureFlag component to
allow the use of suspend options.

### Related Issues
<!-- add here the GitHub issue that this PR resolves if applicable -->

#1321

### Notes
<!-- any additional notes for this PR -->

### Follow-up Tasks
<!-- anything that is related to this PR but not done here should be
noted under this section -->
<!-- if there is a need for a new issue, please link it here -->

### How to test
<!-- if applicable, add testing instructions under this section -->

---------

Signed-off-by: marcozabel <marco.zabel@dynatrace.com>

Author: marcozabel

packages/react/src/declarative/FeatureFlag.tsx

@@ -3,6 +3,7 @@ import { useFlag } from '../evaluation';
 import type { FlagQuery } from '../query';
 import type { FlagValue, EvaluationDetails } from '@openfeature/core';
 import { isEqual } from '../internal';
+import type { ReactFlagEvaluationOptions } from '../options';
 
 /**
  * Default predicate function that checks if the expected value equals the actual flag value.
@@ -44,6 +45,11 @@ interface FeatureFlagProps<T extends FlagValue = FlagValue> {
    * Can be a React node or a function that receives evaluation details and returns a React node.
    */
   fallback?: React.ReactNode | ((details: EvaluationDetails<T>) => React.ReactNode);
+
+  /**
+   * Flag evaluation options that will be passed to useFlag hook.
+   */
+  evaluationOptions?: ReactFlagEvaluationOptions;
 }
 
 /**
@@ -86,10 +92,12 @@ export function FeatureFlag<T extends FlagValue = FlagValue>({
   predicate,
   defaultValue,
   children,
+  evaluationOptions = {},
   fallback = null,
 }: FeatureFlagComponentProps<T>): React.ReactElement | null {
   const details = useFlag(flagKey, defaultValue, {
     updateOnContextChanged: true,
+    ...evaluationOptions,
   });
 
   // If the flag evaluation failed, we render the fallback

packages/react/test/declarative.spec.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import '@testing-library/jest-dom'; // see: https://testing-library.com/docs/react-testing-library/setup
 import { render, screen } from '@testing-library/react';
 import { FeatureFlag } from '../src/declarative/FeatureFlag'; // Assuming Feature.tsx is in the same directory or adjust path
-import { InMemoryProvider, OpenFeature, OpenFeatureProvider } from '../src';
+import type { Provider } from '../src';
+import { InMemoryProvider, OpenFeature, OpenFeatureProvider, ProviderStatus } from '../src';
 import type { EvaluationDetails } from '@openfeature/core';
 
 describe('Feature Component', () => {
@@ -47,13 +48,25 @@ describe('Feature Component', () => {
     return new InMemoryProvider(FLAG_CONFIG);
   };
 
-  OpenFeature.setProvider(EVALUATION, makeProvider());
+  const makeAsyncProvider = () => {
+    class MockAsyncProvider {
+      metadata = {
+        name: 'mock-async',
+      };
+      status = ProviderStatus.NOT_READY;
+
+      async initialize(): Promise<void> {}
+    }
+
+    return new MockAsyncProvider() as Provider;
+  };
 
   const childText = 'Feature is active';
   const ChildComponent = () => <div>{childText}</div>;
 
   beforeEach(() => {
     jest.clearAllMocks();
+    OpenFeature.setProvider(EVALUATION, makeProvider());
   });
 
   describe('<FeatureFlag />', () => {
@@ -108,6 +121,36 @@ describe('Feature Component', () => {
       expect(screen.queryByText(childText)).toBeInTheDocument();
     });
 
+    it('should render the fallback if suspended and flag is unresolved', () => {
+      OpenFeature.setProvider(EVALUATION, makeAsyncProvider());
+
+      render(
+        <OpenFeatureProvider domain={EVALUATION}>
+          <Suspense fallback={<div>Suspense</div>}>
+            <FeatureFlag flagKey={BOOL_FLAG_KEY} defaultValue={false} evaluationOptions={{ suspend: true }}>
+              <ChildComponent />
+            </FeatureFlag>
+          </Suspense>
+        </OpenFeatureProvider>,
+      );
+
+      expect(screen.queryByText('Suspense')).toBeInTheDocument();
+    });
+
+    it('should render child if provider is ready', () => {
+      render(
+        <OpenFeatureProvider domain={EVALUATION}>
+          <Suspense fallback={<div>Suspense</div>}>
+            <FeatureFlag flagKey={BOOL_FLAG_KEY} defaultValue={false} evaluationOptions={{ suspend: true }}>
+              <ChildComponent />
+            </FeatureFlag>
+          </Suspense>
+        </OpenFeatureProvider>,
+      );
+
+      expect(screen.queryByText(childText)).toBeInTheDocument();
+    });
+
     it('should support custom predicate function', () => {
       const customPredicate = (expected: boolean | undefined, actual: { value: boolean }) => {
         // Custom logic: render if flag is NOT the expected value (negation)