Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react-utilities): avoid calling requestAnimationFrame when in SSR #29015

Merged
merged 11 commits into from
Aug 30, 2023

Conversation

marcosmoura
Copy link
Contributor

Use simple timeout when in SSR environment. This is due to requestAnimationFrame not being available on the server. The setTimeout will be immediate in this case and will keep the code working async.

@marcosmoura marcosmoura requested a review from a team as a code owner August 29, 2023 14:03
@marcosmoura marcosmoura self-assigned this Aug 29, 2023
@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 29, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0b18813:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 607 618 5000
Button mount 299 310 5000
Field mount 1083 1105 5000
FluentProvider mount 692 684 5000
FluentProviderWithTheme mount 78 89 10
FluentProviderWithTheme virtual-rerender 59 63 10
FluentProviderWithTheme virtual-rerender-with-unmount 78 76 10
InfoButton mount 7 6 5000
MakeStyles mount 856 869 50000
Persona mount 1701 1702 5000
SpinButton mount 1373 1338 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
react-accordion
Accordion (including children components)
88.688 kB
26.917 kB
react-alert
Alert
81.668 kB
21.964 kB
react-avatar
Avatar
47.01 kB
14.502 kB
react-avatar
AvatarGroup
16.116 kB
6.431 kB
react-avatar
AvatarGroupItem
61.789 kB
18.912 kB
react-badge
Badge
23.183 kB
7.254 kB
react-badge
CounterBadge
24.084 kB
7.553 kB
react-badge
PresenceBadge
22.14 kB
7.867 kB
react-button
Button
36.91 kB
9.685 kB
react-button
CompoundButton
44.259 kB
11.167 kB
react-button
MenuButton
41.296 kB
10.933 kB
react-button
SplitButton
49.331 kB
12.486 kB
react-button
ToggleButton
53.956 kB
11.582 kB
react-card
Card - All
88.334 kB
25.252 kB
react-card
Card
83.177 kB
23.742 kB
react-card
CardFooter
9.338 kB
3.932 kB
react-card
CardHeader
11.589 kB
4.707 kB
react-card
CardPreview
10.297 kB
4.317 kB
react-checkbox
Checkbox
32.872 kB
10.652 kB
react-combobox
Combobox (including child components)
87.101 kB
28.273 kB
react-combobox
Dropdown (including child components)
85.555 kB
27.926 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.583 kB
18.469 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.722 kB
57.915 kB
react-components
react-components: FluentProvider & webLightTheme
37.926 kB
12.419 kB
react-datepicker-compat
DatePicker Compat
207.261 kB
57.469 kB
react-dialog
Dialog (including children components)
87.129 kB
26.405 kB
react-divider
Divider
17.098 kB
6.303 kB
react-field
Field
18.295 kB
6.978 kB
react-image
Image
12.029 kB
4.783 kB
react-infobutton
InfoButton
125.517 kB
39.389 kB
react-infobutton
InfoLabel
129.188 kB
40.559 kB
react-input
Input
23.237 kB
7.688 kB
react-jsx-runtime
Classic Pragma
1.049 kB
531 B
react-jsx-runtime
JSX Dev Runtime
2.752 kB
1.277 kB
react-jsx-runtime
JSX Runtime
3.27 kB
1.519 kB
react-label
Label
10.423 kB
4.31 kB
react-link
Link
13.254 kB
5.397 kB
react-menu
Menu (including children components)
135.626 kB
41.648 kB
react-menu
Menu (including selectable components)
138.312 kB
42.154 kB
react-overflow
hooks only
12.419 kB
4.687 kB
react-persona
Persona
53.905 kB
16.371 kB
react-popover
Popover
114.788 kB
36.02 kB
react-portal
Portal
12.255 kB
4.504 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
25.137 kB
9.109 kB
react-progress
ProgressBar
13.718 kB
5.476 kB
react-provider
FluentProvider
18.471 kB
6.847 kB
react-radio
Radio
26.617 kB
8.601 kB
react-radio
RadioGroup
11.622 kB
4.833 kB
react-select
Select
24.599 kB
8.651 kB
react-slider
Slider
34.134 kB
11.039 kB
react-spinbutton
SpinButton
32.773 kB
10.216 kB
react-spinner
Spinner
19.678 kB
7.03 kB
react-switch
Switch
29.092 kB
9.217 kB
react-table
DataGrid
152.991 kB
42.325 kB
react-table
Table (Primitives only)
39.638 kB
12.129 kB
react-table
Table as DataGrid
126.247 kB
33.617 kB
react-table
Table (Selection only)
71.617 kB
18.915 kB
react-table
Table (Sort only)
70.236 kB
18.516 kB
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
Tag
27.792 kB
8.768 kB
react-tags-preview
TagGroup
69.626 kB
20.485 kB
react-text
Text - Default
13.043 kB
5.129 kB
react-text
Text - Wrappers
16.215 kB
5.447 kB
react-textarea
Textarea
27.302 kB
9.047 kB
react-toast
Toast (including Toaster)
87.733 kB
26.042 kB
react-tooltip
Tooltip
48.1 kB
16.875 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 6785ad731df26a388b8efda4e40d75931c6c3c13

@size-auditor
Copy link

size-auditor bot commented Aug 29, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 6785ad731df26a388b8efda4e40d75931c6c3c13 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 29, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@marcosmoura marcosmoura requested a review from a team as a code owner August 30, 2023 12:26
@marcosmoura marcosmoura changed the title fix: use timeout instead of requestAnimationFrame for ssr fix(react-utilities): use timeout instead of requestAnimationFrame when in SSR Aug 30, 2023
@marcosmoura marcosmoura enabled auto-merge (squash) August 30, 2023 12:29
@marcosmoura marcosmoura changed the title fix(react-utilities): use timeout instead of requestAnimationFrame when in SSR fix(react-utilities): safely avoid calling requestAnimationFrame when in SSR Aug 30, 2023
@marcosmoura marcosmoura changed the title fix(react-utilities): safely avoid calling requestAnimationFrame when in SSR fix(react-utilities): avoid calling requestAnimationFrame when in SSR Aug 30, 2023
@marcosmoura marcosmoura enabled auto-merge (squash) August 30, 2023 12:50
@marcosmoura marcosmoura merged commit 68fe113 into microsoft:master Aug 30, 2023
24 checks passed
@marcosmoura marcosmoura deleted the fix/useAnimationFrame-on-ssr branch August 30, 2023 15:00
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 3, 2023
* master: (32 commits)
  refactor(react-drawer): change DrawerHeaderTitle slot creation while keeping the same API (microsoft#29042)
  test(react-drawer): add render tests for drawer subcomponents (microsoft#29043)
  Grouped vertical bar chart - Component tests (microsoft#29031)
  docs: add Fluent UI Insights EP06 to README (microsoft#29051)
  chore: use swc-plugin-de-indent-template-literal for consoles (microsoft#29040)
  chore: adds swc-plugin-de-indent-template-literal (microsoft#29037)
  feat(react-jsx-runtime): v9 packages to use importSource (microsoft#28959)
  chore: update swc build dependencies (microsoft#28989)
  fix(react-tags-preview): add hover/pressed style for windows high contrast (microsoft#29035)
  chore(react-tags-preview): use InteractionTag for TagGroup's stories (microsoft#29024)
  chore(react-tags-preview): use makeResetStyles for base styles (microsoft#29022)
  chore: fix codesandbox export for preview component by making @fluentui/react-components required dependency (microsoft#29016)
  applying package updates
  feat(react-motion): create useReducedMotion and apply to useMotion to skip animations (microsoft#29014)
  ReAdd: Keytips: Align keytipData with visible instance for dupes (microsoft#28992)
  feat(react-drawer): add motion to Drawer (microsoft#28999)
  fix(react-utilities): avoid calling requestAnimationFrame when in SSR (microsoft#29015)
  fix(ssr-tests-v9): use correct path for ssr-tests-v9 stories (microsoft#29025)
  chore: updates devcontainer to use v16-bookworm image (microsoft#28997)
  feat(docsite): add Application Insights telemetry (microsoft#28709)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants