Theme fixes#7870
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle AnalysisThis analysis was generated by the next.js bundle analysis action 🤖
|
| Page | Size (compressed) |
|---|---|
global |
233.37 KB (🟡 +29 B) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Sixty-seven Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/404 |
8.45 KB |
241.82 KB | 69.09% (+/- <0.01%) |
/[user] |
70.26 KB |
303.64 KB | 86.75% (🟡 +0.02%) |
/[user]/[type] |
92 KB |
325.37 KB | 92.96% (🟡 +0.02%) |
/[user]/[type]/embed |
92.03 KB |
325.4 KB | 92.97% (🟡 +0.02%) |
/[user]/book |
183.59 KB |
416.96 KB | 119.13% (🟡 +0.02%) |
/[user]/embed |
70.33 KB |
303.7 KB | 86.77% (🟡 +0.02%) |
/apps |
167.3 KB |
400.68 KB | 114.48% (🟡 +0.02%) |
/apps/[slug] |
191.02 KB |
424.4 KB | 121.26% (🟡 +0.01%) |
/apps/[slug]/[...pages] |
392.28 KB |
625.65 KB | 178.76% (🟡 +0.01%) |
/apps/categories |
152.2 KB |
385.58 KB | 110.16% (🟡 +0.02%) |
/apps/categories/[category] |
156.07 KB |
389.44 KB | 111.27% (🟡 +0.02%) |
/apps/installed/[category] |
197.05 KB |
430.43 KB | 122.98% (🟡 +0.02%) |
/auth/error |
19.24 KB |
252.61 KB | 72.18% (+/- <0.01%) |
/auth/forgot-password |
25.63 KB |
259 KB | 74.00% (+/- <0.01%) |
/auth/forgot-password/[id] |
32.83 KB |
266.2 KB | 76.06% (+/- <0.01%) |
/auth/login |
40.1 KB |
273.47 KB | 78.14% (+/- <0.01%) |
/auth/logout |
7.56 KB |
240.93 KB | 68.84% (+/- <0.01%) |
/availability |
155.51 KB |
388.88 KB | 111.11% (🟡 +0.02%) |
/availability/[schedule] |
272.27 KB |
505.64 KB | 144.47% (🟡 +0.02%) |
/availability/troubleshoot |
152.89 KB |
386.26 KB | 110.36% (🟡 +0.02%) |
/booking/[uid] |
123.69 KB |
357.06 KB | 102.02% (🟡 +0.01%) |
/bookings/[status] |
272.59 KB |
505.97 KB | 144.56% (🟡 +0.02%) |
/d/[link]/[slug] |
91.65 KB |
325.02 KB | 92.86% (🟡 +0.02%) |
/d/[link]/[slug]/embed |
91.68 KB |
325.05 KB | 92.87% (🟡 +0.02%) |
/d/[link]/book |
183.25 KB |
416.62 KB | 119.03% (🟡 +0.02%) |
/event-types |
349.24 KB |
582.61 KB | 166.46% (🟡 +0.02%) |
/event-types/[type] |
383.07 KB |
616.44 KB | 176.13% (🟡 +0.01%) |
/insights |
387.36 KB |
620.73 KB | 177.35% (🟡 +0.02%) |
/more |
151.83 KB |
385.2 KB | 110.06% (🟡 +0.01%) |
/payment/[uid] |
60.91 KB |
294.29 KB | 84.08% (🟡 +0.02%) |
/settings/admin |
157.28 KB |
390.66 KB | 111.62% (🟡 +0.01%) |
/settings/admin/apps |
165.97 KB |
399.34 KB | 114.10% (🟡 +0.01%) |
/settings/admin/apps/[category] |
165.95 KB |
399.33 KB | 114.09% (🟡 +0.02%) |
/settings/admin/flags |
160.18 KB |
393.55 KB | 112.44% (🟡 +0.02%) |
/settings/admin/impersonation |
157.57 KB |
390.94 KB | 111.70% (🟡 +0.01%) |
/settings/billing |
157.4 KB |
390.77 KB | 111.65% (🟡 +0.01%) |
/settings/developer/api-keys |
186.55 KB |
419.92 KB | 119.98% (🟡 +0.01%) |
/settings/developer/webhooks |
160.05 KB |
393.42 KB | 112.41% (🟡 +0.01%) |
/settings/developer/webhooks/[id] |
190.74 KB |
424.11 KB | 121.18% (🟡 +0.01%) |
/settings/developer/webhooks/new |
190.6 KB |
423.97 KB | 121.13% (🟡 +0.02%) |
/settings/my-account/appearance |
171.34 KB |
404.72 KB | 115.63% (🟡 +0.02%) |
/settings/my-account/calendars |
191.58 KB |
424.96 KB | 121.42% (🟡 +0.01%) |
/settings/my-account/conferencing |
163.21 KB |
396.58 KB | 113.31% (🟡 +0.01%) |
/settings/my-account/general |
266.55 KB |
499.92 KB | 142.84% (🟡 +0.01%) |
/settings/my-account/profile |
274.37 KB |
507.75 KB | 145.07% (🟡 +0.02%) |
/settings/security/impersonation |
159.44 KB |
392.81 KB | 112.23% (🟡 +0.02%) |
/settings/security/password |
192.73 KB |
426.1 KB | 121.74% (🟡 +0.02%) |
/settings/security/sso |
167.13 KB |
400.5 KB | 114.43% (🟡 +0.02%) |
/settings/security/two-factor-auth |
161.95 KB |
395.32 KB | 112.95% (🟡 +0.02%) |
/settings/teams |
157.03 KB |
390.4 KB | 111.54% (🟡 +0.02%) |
/settings/teams/[id]/appearance |
171.37 KB |
404.74 KB | 115.64% (🟡 +0.02%) |
/settings/teams/[id]/billing |
157.26 KB |
390.64 KB | 111.61% (🟡 +0.02%) |
/settings/teams/[id]/members |
297.36 KB |
530.74 KB | 151.64% (🟡 +0.02%) |
/settings/teams/[id]/profile |
269.58 KB |
502.96 KB | 143.70% (🟡 +0.02%) |
/settings/teams/[id]/sso |
167.22 KB |
400.6 KB | 114.46% (🟡 +0.01%) |
/signup |
25.5 KB |
258.87 KB | 73.96% (+/- <0.01%) |
/team/[slug] |
72.67 KB |
306.04 KB | 87.44% (🟡 +0.01%) |
/team/[slug]/[type] |
91.65 KB |
325.02 KB | 92.86% (🟡 +0.02%) |
/team/[slug]/[type]/embed |
91.68 KB |
325.05 KB | 92.87% (🟡 +0.02%) |
/team/[slug]/book |
183.25 KB |
416.62 KB | 119.03% (🟡 +0.02%) |
/team/[slug]/embed |
72.73 KB |
306.11 KB | 87.46% (🟡 +0.01%) |
/teams |
152.04 KB |
385.42 KB | 110.12% (🟡 +0.02%) |
/video/meeting-ended/[uid] |
14.67 KB |
248.04 KB | 70.87% (+/- <0.01%) |
/video/meeting-not-started/[uid] |
14.3 KB |
247.67 KB | 70.76% (+/- <0.01%) |
/video/no-meeting-found |
6.6 KB |
239.98 KB | 68.56% (+/- <0.01%) |
/workflows |
165.05 KB |
398.42 KB | 113.83% (🟡 +0.02%) |
/workflows/[workflow] |
294.17 KB |
527.54 KB | 150.73% (🟡 +0.01%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
| const [selectedTimeZone, setSelectedTimeZone] = useState(""); | ||
| const query = useMeQuery(); | ||
| const userTheme = useTheme(query?.data?.theme).resolvedTheme; | ||
| const userTheme = useTheme().resolvedTheme; |
There was a problem hiding this comment.
TimeOptions is used on booking page and booking page theming is based on the organizer being booked and not the logged in user.
| const storageKey = typeof embedNamespace === "string" ? `embed-theme-${embedNamespace}` : "theme"; | ||
|
|
||
| const storageKey = | ||
| typeof embedNamespace === "string" ? `embed-theme-${embedNamespace}` : `theme-${bookingPageSlug}`; |
There was a problem hiding this comment.
next-themes persist in localStorage which is shared for the domain.
Due to this we can have 2 pages opened simultaneously with 2 different themes but they are trying to use the same localStorage item. If the 2 booking pages have conflicting themes configured they would forever try to change each other's value.
To avoid this, I plan to use profile.username as a differentiator. For team pages, it can be team name.
There was a problem hiding this comment.
Will it be easier to note that we will be using system theme i believe shortly for most of the authed app? Not sure if this has any effect here or not
There was a problem hiding this comment.
From the comment on threads:
Theming is very complex because of the following reasons:
- App can't use themes. It has to be light only
- Booking Pages have to have different themes for different users
- Next-theme uses localStorage to persist the preference(to avoid Flash of unthemed content).
- But localStorage is shared across the domain (specifically origin) and thus one theme persisted by Next-Theme impacts the theme of other booking page.
- Then there are embeds which can have different theme than configured in app because there is an API to switch the theme for embed only
- There can be multiple embeds having different themes configured and they have to work with those themes
That would fix just the first point and would also eliminate the need of setting isThemeSupported for booking pages, as isThemeSupported would always be true. But it would certainly simplify the code and avoid possible bugs in future as we would be designing all components with theme support in mind.
There was a problem hiding this comment.
All components in future will have automatic theme support with tokens :) The way it is currently in my branch
bg-subtle text-emphasis handles all themes needed
Current Playwright Test Results Summary✅ 20 Passing - ❌ 6 Failing - Run may still be in progress, this comment will be updated as current testing workflow or job completes... (Last updated on 04/03/2023 10:28:21am UTC) Run DetailsRunning Workflow PR Update on Github Actions Commit: 2dc55ff Started: 04/03/2023 10:21:13am UTC ❌ Failures📄 apps/web/playwright/booking-pages.e2e.ts • 3 FailuresTop 1 Common Error Messages
Test Case Results
📄 packages/embeds/embed-core/playwright/tests/action-based.test.ts • 2 FailuresTop 1 Common Error Messages
Test Case Results
📄 packages/embeds/embed-core/playwright/tests/inline.e2e.ts • 1 FailureTest Case Results
|
| Test Case | Last 7 days Failures | Last 7 days Flakes |
|---|---|---|
|
Routing Forms Seeded Routing Form Routing Link - Reporting and CSV Download
Retry 1 • Initial Attempt |
9.40% (14)14 / 149 runsfailed over last 7 days |
24.16% (36)36 / 149 runsflaked over last 7 days |
|
@hariombalhara whats needed here to leave draft? |
|
Waiting on @sean-brydon's dark mode to merge now. |
|
Closing in favour of #8108 which handles everything except the case where different booking pages can have different themes and that makes them switch. |
3 participants
What does this PR do?
Fixes #7858
Environment: Staging(main branch) / Production
Type of change
How should this be tested?
Checklist