refactor: Extract LaunchDarklyProvider to shared-web

apps/web/src/Providers.tsx

@@ -1,13 +1,12 @@
 import { Loader } from '@mantine/core';
-import { CONTEXT_PATH, SegmentProvider } from '@novu/shared-web';
+import { CONTEXT_PATH, LaunchDarklyProvider, SegmentProvider } from '@novu/shared-web';
 import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 import { api } from './api/api.client';
 import { AuthProvider } from './components/providers/AuthProvider';
-import { LaunchDarklyProvider } from './LaunchDarklyProvider';
 import { css } from './styled-system/css';
 
 const defaultQueryFn = async ({ queryKey }: { queryKey: string }) => {
@@ -24,6 +23,7 @@ const queryClient = new QueryClient({
   },
 });
 
+/** Full-page loader that uses color-preferences for background */
 const fallbackDisplay = (
   <div
     className={css({

apps/web/src/LaunchDarklyProvider.tsx → libs/shared-web/src/providers/LaunchDarklyProvider.tsx

@@ -1,12 +1,10 @@
 import { IOrganizationEntity } from '@novu/shared';
-import {
-  LAUNCH_DARKLY_CLIENT_SIDE_ID,
-  useAuthContext,
-  useFeatureFlags,
-  checkIsUnprotectedPathname,
-} from '@novu/shared-web';
 import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
 import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
+import { LAUNCH_DARKLY_CLIENT_SIDE_ID } from '../config';
+import { useFeatureFlags } from '../hooks';
+import { checkIsUnprotectedPathname, checkShouldUseLaunchDarkly } from '../utils';
+import { useAuthContext } from './AuthProvider';
 
 /** A provider with children required */
 type GenericLDProvider = Awaited<ReturnType<typeof asyncWithLDProvider>>;
@@ -59,8 +57,11 @@ export const LaunchDarklyProvider: React.FC<PropsWithChildren<ILaunchDarklyProvi
     fetchLDProvider();
   }, [setIsLDReady, currentOrganization]);
 
-  // eslint-disable-next-line multiline-comment-style
-  if (shouldUseLaunchDarkly() && !checkIsUnprotectedPathname(window.location.pathname) && !isLDReady) {
+  /**
+   * For self-hosted, LD will not be enabled, so do not block initialization.
+   * Checking unprotected (routes without org-based auth) is required to ensure that such routes still load.
+   */
+  if (checkShouldUseLaunchDarkly() && !checkIsUnprotectedPathname(window.location.pathname) && !isLDReady) {
     return <>{fallbackDisplay}</>;
   }
 
@@ -79,7 +80,3 @@ function LaunchDarklyClientWrapper({ children, org }: PropsWithChildren<{ org?:
 
   return <>{children}</>;
 }
-
-function shouldUseLaunchDarkly(): boolean {
-  return !!process.env.REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID;
-}

libs/shared-web/src/providers/index.ts

@@ -1,2 +1,3 @@
 export * from './SegmentProvider';
 export * from './AuthProvider';
+export * from './LaunchDarklyProvider';

libs/shared-web/src/utils/checkShouldUseLaunchDarkly.ts

@@ -0,0 +1,3 @@
+export const checkShouldUseLaunchDarkly = (): boolean => {
+  return !!process.env.REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID;
+};

libs/shared-web/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './segment';
 export * from './checkIsUnprotectedPathname';
+export * from './checkShouldUseLaunchDarkly';