perf: Lazy load moment-timezone

apache · Jul 31, 2024 · 51aeb4e · 51aeb4e
1 parent 2231348
commit 51aeb4e
Showing 1 changed file with 90 additions and 64 deletions.
diff --git a/superset-frontend/src/components/TimezoneSelector/index.tsx b/superset-frontend/src/components/TimezoneSelector/index.tsx
@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import { useEffect, useMemo } from 'react';
-import moment from 'moment-timezone';
+import { useEffect, useMemo, useState } from 'react';
 import { t } from '@superset-ui/core';
 import { Select } from 'src/components';
+import Loading from 'src/components/Loading';
 
 const DEFAULT_TIMEZONE = {
  name: 'GMT Standard Time',
@@ -45,62 +45,6 @@ const offsetsToName = {
  '060': ['GMT Standard Time - London', 'British Summer Time'],
 };
 
-const currentDate = moment();
-const JANUARY = moment([2021, 1]);
-const JULY = moment([2021, 7]);
-
-const getOffsetKey = (name: string) =>
- JANUARY.tz(name).utcOffset().toString() +
- JULY.tz(name).utcOffset().toString();
-
-const getTimezoneName = (name: string) => {
- const offsets = getOffsetKey(name);
- return (
- (currentDate.tz(name).isDST()
- ? offsetsToName[offsets]?.[1]
- : offsetsToName[offsets]?.[0]) || name
- );
-};
-
-const ALL_ZONES = moment.tz
- .countries()
- .map(country => moment.tz.zonesForCountry(country, true))
- .flat();
-
-const TIMEZONES: moment.MomentZoneOffset[] = [];
-ALL_ZONES.forEach(zone => {
- if (
- !TIMEZONES.find(
- option => getOffsetKey(option.name) === getOffsetKey(zone.name),
- )
- ) {
- TIMEZONES.push(zone); // dedupe zones by offsets
- }
-});
-
-const TIMEZONE_OPTIONS = TIMEZONES.map(zone => ({
- label: `GMT ${moment
- .tz(currentDate, zone.name)
- .format('Z')} (${getTimezoneName(zone.name)})`,
- value: zone.name,
- offsets: getOffsetKey(zone.name),
- timezoneName: zone.name,
-}));
-
-const TIMEZONE_OPTIONS_SORT_COMPARATOR = (
- a: (typeof TIMEZONE_OPTIONS)[number],
- b: (typeof TIMEZONE_OPTIONS)[number],
-) =>
- moment.tz(currentDate, a.timezoneName).utcOffset() -
- moment.tz(currentDate, b.timezoneName).utcOffset();
-
-// pre-sort timezone options by time offset
-TIMEZONE_OPTIONS.sort(TIMEZONE_OPTIONS_SORT_COMPARATOR);
-
-const matchTimezoneToOptions = (timezone: string) =>
- TIMEZONE_OPTIONS.find(option => option.offsets === getOffsetKey(timezone))
- ?.value || DEFAULT_TIMEZONE.value;
-
 export type TimezoneSelectorProps = {
  onTimezoneChange: (value: string) => void;
  timezone?: string | null;
@@ -112,23 +56,105 @@ export default function TimezoneSelector({
  timezone,
  minWidth = MIN_SELECT_WIDTH, // smallest size for current values
 }: TimezoneSelectorProps) {
- const validTimezone = useMemo(
- () => matchTimezoneToOptions(timezone || moment.tz.guess()),
- [timezone],
- );
+ const [momentLib, setMomentLib] = useState<
+ typeof import('moment-timezone') | null
+ >(null);
+
+ useEffect(() => {
+ import('moment-timezone').then(momentLib =>
+ setMomentLib(() => momentLib.default),
+ );
+ }, []);
+
+ const { TIMEZONE_OPTIONS, TIMEZONE_OPTIONS_SORT_COMPARATOR, validTimezone } =
+ useMemo(() => {
+ if (!momentLib) {
+ return {};
+ }
+ const currentDate = momentLib();
+ const JANUARY = momentLib([2021, 1]);
+ const JULY = momentLib([2021, 7]);
+
+ const getOffsetKey = (name: string) =>
+ JANUARY.tz(name).utcOffset().toString() +
+ JULY.tz(name).utcOffset().toString();
+
+ const getTimezoneName = (name: string) => {
+ const offsets = getOffsetKey(name);
+ return (
+ (currentDate.tz(name).isDST()
+ ? offsetsToName[offsets]?.[1]
+ : offsetsToName[offsets]?.[0]) || name
+ );
+ };
+
+ const ALL_ZONES = momentLib.tz
+ .countries()
+ .map(country => momentLib.tz.zonesForCountry(country, true))
+ .flat();
+
+ const TIMEZONES: import('moment-timezone').MomentZoneOffset[] = [];
+ ALL_ZONES.forEach(zone => {
+ if (
+ !TIMEZONES.find(
+ option => getOffsetKey(option.name) === getOffsetKey(zone.name),
+ )
+ ) {
+ TIMEZONES.push(zone); // dedupe zones by offsets
+ }
+ });
+
+ const TIMEZONE_OPTIONS = TIMEZONES.map(zone => ({
+ label: `GMT ${momentLib
+ .tz(currentDate, zone.name)
+ .format('Z')} (${getTimezoneName(zone.name)})`,
+ value: zone.name,
+ offsets: getOffsetKey(zone.name),
+ timezoneName: zone.name,
+ }));
+
+ const TIMEZONE_OPTIONS_SORT_COMPARATOR = (
+ a: (typeof TIMEZONE_OPTIONS)[number],
+ b: (typeof TIMEZONE_OPTIONS)[number],
+ ) =>
+ momentLib.tz(currentDate, a.timezoneName).utcOffset() -
+ momentLib.tz(currentDate, b.timezoneName).utcOffset();
+
+ // pre-sort timezone options by time offset
+ TIMEZONE_OPTIONS.sort(TIMEZONE_OPTIONS_SORT_COMPARATOR);
+
+ const matchTimezoneToOptions = (timezone: string) =>
+ TIMEZONE_OPTIONS.find(
+ option => option.offsets === getOffsetKey(timezone),
+ )?.value || DEFAULT_TIMEZONE.value;
+
+ const validTimezone = matchTimezoneToOptions(
+ timezone || momentLib.tz.guess(),
+ );
+
+ return {
+ TIMEZONE_OPTIONS,
+ TIMEZONE_OPTIONS_SORT_COMPARATOR,
+ validTimezone,
+ };
+ }, [momentLib, timezone]);
 
  // force trigger a timezone update if provided `timezone` is not invalid
  useEffect(() => {
- if (timezone !== validTimezone) {
+ if (validTimezone && timezone !== validTimezone) {
  onTimezoneChange(validTimezone);
  }
  }, [validTimezone, onTimezoneChange, timezone]);
 
+ if (!TIMEZONE_OPTIONS || !TIMEZONE_OPTIONS_SORT_COMPARATOR) {
+ return <Loading position="inline-centered" />;
+ }
+
  return (
  <Select
  ariaLabel={t('Timezone selector')}
  css={{ minWidth }}
- onChange={tz => onTimezoneChange(tz as string)}
+ onChange={onTimezoneChange}
  value={validTimezone}
  options={TIMEZONE_OPTIONS}
  sortComparator={TIMEZONE_OPTIONS_SORT_COMPARATOR}