Wrap storybook preview in <Profiler> component (#4746)

primer · Jul 18, 2024 · 2ec6d14 · 2ec6d14
1 parent caa0001
commit 2ec6d14
Showing 1 changed file with 18 additions and 11 deletions.
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -6,6 +6,7 @@ import clsx from 'clsx'
 
 import './storybook.css'
 import './primitives-v8.css'
+import {Profiler} from 'react'
 
 let storybookViewports = {}
 Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
@@ -219,17 +220,23 @@ export const decorators = [
         </ThemeProvider>
       ))
     ) : (
-      <ThemeProvider dayScheme={context.globals.colorScheme} nightScheme={context.globals.colorScheme} colorMode="day">
-        <div className={clsx('story-wrap')}>
-          <BaseStyles>
-            {showSurroundingElements ? <a href="https://github.com/primer/react">Primer documentation</a> : ''}
-            <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
-              <Story {...context} />
-            </FeatureFlags>
-            {showSurroundingElements ? <a href="https://github.com/primer/react">Primer documentation</a> : ''}
-          </BaseStyles>
-        </div>
-      </ThemeProvider>
+      <Profiler id="storybook-preview">
+        <ThemeProvider
+          dayScheme={context.globals.colorScheme}
+          nightScheme={context.globals.colorScheme}
+          colorMode="day"
+        >
+          <div className={clsx('story-wrap')}>
+            <BaseStyles>
+              {showSurroundingElements ? <a href="https://github.com/primer/react">Primer documentation</a> : ''}
+              <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
+                <Story {...context} />
+              </FeatureFlags>
+              {showSurroundingElements ? <a href="https://github.com/primer/react">Primer documentation</a> : ''}
+            </BaseStyles>
+          </div>
+        </ThemeProvider>
+      </Profiler>
     )
   },
 ]