perf: use react svg cache from root level (#18506)

apps/web/app/providers.tsx

@@ -2,11 +2,15 @@
 
 import { TrpcProvider } from "app/_trpc/trpc-provider";
 import { SessionProvider } from "next-auth/react";
+import CacheProvider from "react-inlinesvg/provider";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
-      <TrpcProvider>{children}</TrpcProvider>
+      <TrpcProvider>
+        {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+        <CacheProvider>{children}</CacheProvider>
+      </TrpcProvider>
     </SessionProvider>
   );
 }

apps/web/lib/app-providers-app-dir.tsx

@@ -12,7 +12,6 @@ import type { ReadonlyURLSearchParams } from "next/navigation";
 import { useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect } from "react";
-import CacheProvider from "react-inlinesvg/provider";
 
 import DynamicPostHogProvider from "@calcom/features/ee/event-tracking/lib/posthog/providerDynamic";
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
@@ -277,10 +276,7 @@ const AppProviders = (props: PageWrapperProps) => {
             isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported}
             isBookingPage={props.isBookingPage || isBookingPage}>
             <FeatureFlagsProvider>
-              <OrgBrandProvider>
-                {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
-                <CacheProvider>{props.children}</CacheProvider>
-              </OrgBrandProvider>
+              <OrgBrandProvider>{props.children}</OrgBrandProvider>
             </FeatureFlagsProvider>
           </CalcomThemeProvider>
         </TooltipProvider>

apps/web/lib/app-providers.tsx

@@ -11,7 +11,6 @@ import dynamic from "next/dynamic";
 import type { ParsedUrlQuery } from "querystring";
 import type { PropsWithChildren, ReactNode } from "react";
 import { useEffect } from "react";
-import CacheProvider from "react-inlinesvg/provider";
 
 import DynamicPostHogProvider from "@calcom/features/ee/event-tracking/lib/posthog/providerDynamic";
 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
@@ -307,10 +306,7 @@ const AppProviders = (props: AppPropsWithChildren) => {
             router={props.router}>
             <FeatureFlagsProvider>
               <OrgBrandProvider>
-                {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
-                <CacheProvider>
-                  <MetaProvider>{props.children}</MetaProvider>
-                </CacheProvider>
+                <MetaProvider>{props.children}</MetaProvider>
               </OrgBrandProvider>
             </FeatureFlagsProvider>
           </CalcomThemeProvider>

apps/web/pages/_app.tsx

@@ -2,6 +2,7 @@ import type { IncomingMessage } from "http";
 import { SessionProvider } from "next-auth/react";
 import type { AppContextType } from "next/dist/shared/lib/utils";
 import React, { useEffect } from "react";
+import CacheProvider from "react-inlinesvg/provider";
 
 import { trpc } from "@calcom/trpc/react";
 
@@ -20,7 +21,10 @@ function MyApp(props: AppProps) {
 
   return (
     <SessionProvider session={pageProps.session ?? undefined}>
-      {Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />}
+      {/* @ts-expect-error FIXME remove this comment when upgrading typescript to v5 */}
+      <CacheProvider>
+        {Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />}
+      </CacheProvider>
     </SessionProvider>
   );
 }