add wrapping hook

jest/lib.tsx

@@ -1,4 +1,5 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { RenderOptions } from '@testing-library/react';
 import { render } from '@testing-library/react';
@@ -36,9 +37,11 @@ const TestApp = ({ children }: {children: React.ReactNode}) => {
       <QueryClientProvider client={ queryClient }>
         <AppContextProvider pageProps={ PAGE_PROPS }>
           <ScrollDirectionProvider>
-            <SocketProvider>
-              { children }
-            </SocketProvider>
+            <GrowthBookProvider>
+              <SocketProvider>
+                { children }
+              </SocketProvider>
+            </GrowthBookProvider>
           </ScrollDirectionProvider>
         </AppContextProvider>
       </QueryClientProvider>

lib/growthbook/useFeatureValue.ts

@@ -0,0 +1,11 @@
+import { useFeatureValue, useGrowthBook } from '@growthbook/growthbook-react';
+
+export default function useGbFeatureValue<T extends Parameters<typeof useFeatureValue>[1]>(
+  name: Parameters<typeof useFeatureValue>[0],
+  fallback: T,
+): { value: ReturnType<typeof useFeatureValue<T>>; isLoading: boolean } {
+  const value = useFeatureValue(name, fallback);
+  const growthBook = useGrowthBook();
+
+  return { value, isLoading: !(growthBook?.ready ?? true) };
+}

pages/_app.tsx

@@ -10,6 +10,7 @@ import type { NextPageWithLayout } from 'nextjs/types';
 
 import config from 'configs/app';
 import useQueryClientConfig from 'lib/api/useQueryClientConfig';
+import { SECOND } from 'lib/consts';
 import { AppContextProvider } from 'lib/contexts/app';
 import { ChakraProvider } from 'lib/contexts/chakra';
 import { ScrollDirectionProvider } from 'lib/contexts/scrollDirection';
@@ -42,7 +43,7 @@ const ERROR_SCREEN_STYLES: ChakraProps = {
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   React.useEffect(() => {
-    growthBook?.loadFeatures();
+    growthBook?.loadFeatures({ timeout: SECOND });
   }, []);
 
   const queryClient = useQueryClientConfig();

playwright/TestApp.tsx

@@ -1,4 +1,5 @@
 import { ChakraProvider } from '@chakra-ui/react';
+import { GrowthBookProvider } from '@growthbook/growthbook-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react';
 import React from 'react';
@@ -63,9 +64,11 @@ const TestApp = ({ children, withSocket, appContext = defaultAppContext }: Props
       <QueryClientProvider client={ queryClient }>
         <SocketProvider url={ withSocket ? `ws://${ app.domain }:${ app.socketPort }` : undefined }>
           <AppContextProvider { ...appContext }>
-            <WagmiConfig config={ wagmiConfig }>
-              { children }
-            </WagmiConfig>
+            <GrowthBookProvider>
+              <WagmiConfig config={ wagmiConfig }>
+                { children }
+              </WagmiConfig>
+            </GrowthBookProvider>
           </AppContextProvider>
         </SocketProvider>
       </QueryClientProvider>

ui/pages/Login.tsx

@@ -1,12 +1,12 @@
 import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Code, Flex, Box } from '@chakra-ui/react';
-import { useFeatureValue } from '@growthbook/growthbook-react';
 import * as Sentry from '@sentry/react';
 import mixpanel from 'mixpanel-browser';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
 import config from 'configs/app';
 import * as cookies from 'lib/cookies';
+import useFeatureValue from 'lib/growthbook/useFeatureValue';
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useToast from 'lib/hooks/useToast';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -16,7 +16,7 @@ const Login = () => {
   const toast = useToast();
   const [ num, setNum ] = useGradualIncrement(0);
 
-  const testFeatureValue = useFeatureValue('test_value', 'fallback');
+  const testFeature = useFeatureValue('test_value', 'fallback');
 
   const [ isFormVisible, setFormVisibility ] = React.useState(false);
   const [ token, setToken ] = React.useState('');
@@ -88,7 +88,7 @@ const Login = () => {
         <Box w="50px" textAlign="center">{ num }</Box>
         <Button onClick={ handleNumIncrement } size="sm">add</Button>
       </Flex>
-      <Box>Test feature value: <b>{ testFeatureValue }</b></Box>
+      <Box>Test feature value: <b>{ testFeature.isLoading ? 'loading...' : JSON.stringify(testFeature.value) }</b></Box>
     </VStack>
   );