Added a ThemeContext to provide theme related components/assets

ui/packages/shared/components/src/ParcaThemeContext/index.tsx

@@ -0,0 +1,36 @@
+import {createContext, ReactNode, useContext} from 'react';
+import Spinner from '../Spinner';
+
+interface ParcaThemeContextProps {
+  loader: ReactNode;
+}
+
+const defaultValue: ParcaThemeContextProps = {
+  loader: <Spinner />,
+};
+
+const ParcaThemeContext = createContext<ParcaThemeContextProps>(defaultValue);
+
+export const ParcaThemeProvider = ({
+  children,
+  value,
+}: {
+  children: ReactNode;
+  value?: ParcaThemeContextProps;
+}) => {
+  return (
+    <ParcaThemeContext.Provider value={value ?? defaultValue}>
+      {children}
+    </ParcaThemeContext.Provider>
+  );
+};
+
+export const useParcaTheme = () => {
+  const context = useContext(ParcaThemeContext);
+  if (context == null) {
+    return defaultValue;
+  }
+  return context;
+};
+
+export default ParcaThemeContext;

ui/packages/shared/components/src/ProfileMetricsGraph/index.tsx

@@ -5,6 +5,7 @@ import {QueryServiceClient, QueryRangeResponse, Label, Timestamp} from '@parca/c
 import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {DateTimeRange, Spinner, useGrpcMetadata} from '../';
 import {Query} from '@parca/parser';
+import {useParcaTheme} from '../ParcaThemeContext';
 
 interface ProfileMetricsGraphProps {
   queryClient: QueryServiceClient;
@@ -72,6 +73,7 @@ const ProfileMetricsGraph = ({
 }: ProfileMetricsGraphProps): JSX.Element => {
   const {isLoading, response, error} = useQueryRange(queryClient, queryExpression, from, to);
   const [isLoaderVisible, setIsLoaderVisible] = useState<boolean>(false);
+  const {loader} = useParcaTheme();
 
   useEffect(() => {
     let showLoaderTimeout;
@@ -87,7 +89,7 @@ const ProfileMetricsGraph = ({
   }, [isLoading]);
 
   if (isLoaderVisible) {
-    return <Spinner />;
+    return <>{loader}</>;
   }
 
   if (error !== null) {

ui/packages/shared/components/src/index.tsx

@@ -8,6 +8,7 @@ import GrpcMetadataContext, {GrpcMetadataProvider, useGrpcMetadata} from './Grpc
 import Input from './Input';
 import MatchersInput from './MatchersInput';
 import MetricsGraph from './MetricsGraph';
+import ParcaThemeContext, {ParcaThemeProvider, useParcaTheme} from './ParcaThemeContext';
 import Pill, {PillVariant} from './Pill';
 import ProfileExplorer from './ProfileExplorer';
 import ProfileMetricsGraph from './ProfileMetricsGraph';
@@ -33,6 +34,8 @@ export {
   Input,
   MatchersInput,
   MetricsGraph,
+  ParcaThemeContext,
+  ParcaThemeProvider,
   Pill,
   ProfileExplorer,
   ProfileMetricsGraph,
@@ -42,4 +45,5 @@ export {
   Tab,
   EmptyState,
   useGrpcMetadata,
+  useParcaTheme,
 };

ui/packages/shared/profile/src/ProfileView.tsx

@@ -3,7 +3,7 @@ import {CalcWidth} from '@parca/dynamicsize';
 import {parseParams} from '@parca/functions';
 import {QueryServiceClient, QueryResponse, QueryRequest_ReportType} from '@parca/client';
 import {RpcError} from '@protobuf-ts/runtime-rpc';
-import {Button, Card, Spinner, useGrpcMetadata} from '@parca/components';
+import {Button, Card, Spinner, useGrpcMetadata, useParcaTheme} from '@parca/components';
 import * as parca_query_v1alpha1_query_pb from '@parca/client/src/parca/query/v1alpha1/query_pb';
 
 import ProfileIcicleGraph from './ProfileIcicleGraph';
@@ -47,6 +47,7 @@ export const ProfileView = ({
   );
   const [currentView, setCurrentView] = useState<string | undefined>(currentViewFromURL);
   const metadata = useGrpcMetadata();
+  const {loader} = useParcaTheme();
 
   useEffect(() => {
     let showLoaderTimeout;
@@ -62,7 +63,7 @@ export const ProfileView = ({
   }, [isLoading]);
 
   if (isLoaderVisible) {
-    return <Spinner />;
+    return <>{loader}</>;
   }
 
   if (error !== null) {