From 83d091f8bf7490c973e4d43f77a1829772e07fcd Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:23:21 -0700 Subject: [PATCH 1/6] Fix loading of mobile/desktop page on window resize --- .../desktop-client/src/components/App.tsx | 2 +- .../src/components/FinancesApp.tsx | 2 +- .../desktop-client/src/components/Notes.tsx | 2 +- .../src/components/Notifications.tsx | 2 +- .../desktop-client/src/components/Page.tsx | 2 +- .../src/components/PrivacyFilter.tsx | 2 +- .../src/components/ThemeSelector.tsx | 2 +- .../src/components/Titlebar.tsx | 2 +- .../autocomplete/AccountAutocomplete.tsx | 2 +- .../components/autocomplete/Autocomplete.tsx | 2 +- .../autocomplete/CategoryAutocomplete.tsx | 2 +- .../components/autocomplete/ItemHeader.tsx | 2 +- .../autocomplete/PayeeAutocomplete.test.tsx | 2 +- .../autocomplete/PayeeAutocomplete.tsx | 2 +- .../budget/BalanceWithCarryover.tsx | 2 +- .../src/components/manager/BudgetList.tsx | 2 +- .../src/components/manager/ManagementApp.jsx | 2 +- .../src/components/mobile/MobileNavTabs.tsx | 2 +- .../components/mobile/budget/BudgetTable.jsx | 2 +- .../modals/AccountAutocompleteModal.tsx | 2 +- .../modals/CategoryAutocompleteModal.tsx | 2 +- .../components/modals/CloseAccountModal.tsx | 2 +- .../modals/ConfirmTransactionDeleteModal.tsx | 2 +- .../modals/CreateEncryptionKeyModal.tsx | 2 +- .../src/components/modals/EditFieldModal.jsx | 2 +- .../modals/FixEncryptionKeyModal.tsx | 2 +- .../modals/PayeeAutocompleteModal.tsx | 2 +- .../src/components/reports/Header.tsx | 2 +- .../src/components/reports/Overview.tsx | 2 +- .../src/components/reports/ReportCard.tsx | 2 +- .../graphs/tableGraph/ReportTableRow.tsx | 2 +- .../components/reports/reports/CashFlow.tsx | 2 +- .../reports/reports/CustomReport.tsx | 2 +- .../reports/reports/GetCardData.tsx | 2 +- .../components/reports/reports/NetWorth.tsx | 2 +- .../reports/reports/NetWorthCard.tsx | 2 +- .../components/reports/reports/Spending.tsx | 2 +- .../responsive}/ResponsiveProvider.tsx | 26 +++++-------- .../src/components/responsive/index.tsx | 2 +- .../src/components/settings/index.tsx | 2 +- .../src/components/sidebar/Sidebar.tsx | 2 +- .../components/sidebar/SidebarProvider.tsx | 2 +- .../src/components/sidebar/index.tsx | 2 +- .../transactions/TransactionsTable.test.jsx | 2 +- .../src/components/util/LoadComponent.tsx | 39 +++++++++---------- 45 files changed, 70 insertions(+), 81 deletions(-) rename packages/desktop-client/src/{ => components/responsive}/ResponsiveProvider.tsx (59%) diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx index f7785d58df4..e1b0d6eb0ec 100644 --- a/packages/desktop-client/src/components/App.tsx +++ b/packages/desktop-client/src/components/App.tsx @@ -28,7 +28,6 @@ import { import { useMetadataPref } from '../hooks/useMetadataPref'; import { installPolyfills } from '../polyfills'; -import { ResponsiveProvider } from '../ResponsiveProvider'; import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style'; import { ExposeNavigate } from '../util/router-tools'; @@ -40,6 +39,7 @@ import { FatalError } from './FatalError'; import { FinancesApp } from './FinancesApp'; import { ManagementApp } from './manager/ManagementApp'; import { Modals } from './Modals'; +import { ResponsiveProvider } from './responsive/ResponsiveProvider'; import { ScrollProvider } from './ScrollProvider'; import { SidebarProvider } from './sidebar/SidebarProvider'; import { UpdateNotification } from './UpdateNotification'; diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index b585d5d30ee..7a1081df1d5 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -18,7 +18,6 @@ import { useAccounts } from '../hooks/useAccounts'; import { useLocalPref } from '../hooks/useLocalPref'; import { useMetaThemeColor } from '../hooks/useMetaThemeColor'; import { useNavigate } from '../hooks/useNavigate'; -import { useResponsive } from '../ResponsiveProvider'; import { theme } from '../style'; import { getIsOutdated, getLatestVersion } from '../util/versions'; @@ -34,6 +33,7 @@ import { ManagePayeesPage } from './payees/ManagePayeesPage'; import { Reports } from './reports'; import { LoadingIndicator } from './reports/LoadingIndicator'; import { NarrowAlternate, WideComponent } from './responsive'; +import { useResponsive } from './responsive/ResponsiveProvider'; import { Settings } from './settings'; import { FloatableSidebar } from './sidebar'; import { Titlebar } from './Titlebar'; diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx index 332b2c68064..ea78c6b8516 100644 --- a/packages/desktop-client/src/components/Notes.tsx +++ b/packages/desktop-client/src/components/Notes.tsx @@ -5,11 +5,11 @@ import ReactMarkdown from 'react-markdown'; import { css } from '@emotion/css'; import remarkGfm from 'remark-gfm'; -import { useResponsive } from '../ResponsiveProvider'; import { theme } from '../style'; import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown'; import { Text } from './common/Text'; +import { useResponsive } from './responsive/ResponsiveProvider'; const remarkPlugins = [sequentialNewlinesPlugin, remarkGfm, remarkBreaks]; diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx index 12d6e0afb23..370cb1f22c7 100644 --- a/packages/desktop-client/src/components/Notifications.tsx +++ b/packages/desktop-client/src/components/Notifications.tsx @@ -16,7 +16,6 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi import { AnimatedLoading } from '../icons/AnimatedLoading'; import { SvgDelete } from '../icons/v0'; -import { useResponsive } from '../ResponsiveProvider'; import { styles, theme } from '../style'; import { Button, ButtonWithLoading } from './common/Button2'; @@ -24,6 +23,7 @@ import { Link } from './common/Link'; import { Stack } from './common/Stack'; import { Text } from './common/Text'; import { View } from './common/View'; +import { useResponsive } from './responsive/ResponsiveProvider'; function compileMessage( message: string, diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx index 469221d065c..0bdb0a9686b 100644 --- a/packages/desktop-client/src/components/Page.tsx +++ b/packages/desktop-client/src/components/Page.tsx @@ -1,10 +1,10 @@ import React, { type ReactNode, type CSSProperties } from 'react'; -import { useResponsive } from '../ResponsiveProvider'; import { theme, styles } from '../style'; import { Text } from './common/Text'; import { View } from './common/View'; +import { useResponsive } from './responsive/ResponsiveProvider'; const HEADER_HEIGHT = 50; diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx index 6cae00556fe..652b927ac2b 100644 --- a/packages/desktop-client/src/components/PrivacyFilter.tsx +++ b/packages/desktop-client/src/components/PrivacyFilter.tsx @@ -8,9 +8,9 @@ import React, { import { css } from '@emotion/css'; import { usePrivacyMode } from '../hooks/usePrivacyMode'; -import { useResponsive } from '../ResponsiveProvider'; import { View } from './common/View'; +import { useResponsive } from './responsive/ResponsiveProvider'; type ConditionalPrivacyFilterProps = { children: ReactNode; diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx index 91914230927..a2694de4d10 100644 --- a/packages/desktop-client/src/components/ThemeSelector.tsx +++ b/packages/desktop-client/src/components/ThemeSelector.tsx @@ -3,12 +3,12 @@ import React, { useRef, useState, type CSSProperties } from 'react'; import type { Theme } from 'loot-core/src/types/prefs'; import { SvgMoonStars, SvgSun, SvgSystem } from '../icons/v2'; -import { useResponsive } from '../ResponsiveProvider'; import { themeOptions, useTheme } from '../style'; import { Button } from './common/Button2'; import { Menu } from './common/Menu'; import { Popover } from './common/Popover'; +import { useResponsive } from './responsive/ResponsiveProvider'; type ThemeSelectorProps = { style?: CSSProperties; diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index d80f409c6d4..d0cf56a1528 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/packages/desktop-client/src/components/Titlebar.tsx @@ -24,7 +24,6 @@ import { SvgViewHide, SvgViewShow, } from '../icons/v2'; -import { useResponsive } from '../ResponsiveProvider'; import { theme, styles } from '../style'; import { AccountSyncCheck } from './accounts/AccountSyncCheck'; @@ -37,6 +36,7 @@ import { Text } from './common/Text'; import { View } from './common/View'; import { HelpMenu } from './HelpMenu'; import { LoggedInUser } from './LoggedInUser'; +import { useResponsive } from './responsive/ResponsiveProvider'; import { useServerURL } from './ServerContext'; import { useSidebar } from './sidebar/SidebarProvider'; import { useSheetValue } from './spreadsheet/useSheetValue'; diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx index 5d7b5a4e318..e403042878c 100644 --- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx @@ -13,10 +13,10 @@ import { css, cx } from '@emotion/css'; import { type AccountEntity } from 'loot-core/src/types/models'; import { useAccounts } from '../../hooks/useAccounts'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { TextOneLine } from '../common/TextOneLine'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { Autocomplete } from './Autocomplete'; import { ItemHeader } from './ItemHeader'; diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx index a39751c19eb..ff8bc36c3ad 100644 --- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx @@ -17,12 +17,12 @@ import Downshift, { type StateChangeTypes } from 'downshift'; import { getNormalisedString } from 'loot-core/src/shared/normalisation'; import { SvgRemove } from '../../icons/v2'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { Button } from '../common/Button'; import { Input } from '../common/Input'; import { Popover } from '../common/Popover'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type CommonAutocompleteProps = { focused?: boolean; diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index f223b6335ac..92066bf34ae 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -25,13 +25,13 @@ import { import { useCategories } from '../../hooks/useCategories'; import { useSyncedPref } from '../../hooks/useSyncedPref'; import { SvgSplit } from '../../icons/v0'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents'; import { makeAmountFullStyle } from '../budget/util'; import { Text } from '../common/Text'; import { TextOneLine } from '../common/TextOneLine'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { useSheetValue } from '../spreadsheet/useSheetValue'; import { Autocomplete, defaultFilterSuggestion } from './Autocomplete'; diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx index 163772c100a..1d9bf95c12d 100644 --- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx +++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx @@ -1,7 +1,7 @@ import React, { type CSSProperties } from 'react'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type ItemHeaderProps = { title: string; diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.test.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.test.tsx index e248b8cf2f7..226f1b1c232 100644 --- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.test.tsx +++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.test.tsx @@ -7,7 +7,7 @@ import { TestProvider } from 'loot-core/src/mocks/redux'; import type { AccountEntity, PayeeEntity } from 'loot-core/types/models'; import { useCommonPayees } from '../../hooks/usePayees'; -import { ResponsiveProvider } from '../../ResponsiveProvider'; +import { ResponsiveProvider } from '../responsive/ResponsiveProvider'; import { PayeeAutocomplete, diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx index 4490f083f9a..63d054d1e9c 100644 --- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx @@ -27,11 +27,11 @@ import { import { useAccounts } from '../../hooks/useAccounts'; import { useCommonPayees, usePayees } from '../../hooks/usePayees'; import { SvgAdd, SvgBookmark } from '../../icons/v1'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { Button } from '../common/Button'; import { TextOneLine } from '../common/TextOneLine'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { Autocomplete, diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx index 9f04c1f1691..a1bd0f28a4d 100644 --- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx +++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx @@ -11,10 +11,10 @@ import { css } from '@emotion/css'; import { useFeatureFlag } from '../../hooks/useFeatureFlag'; import { SvgArrowThinRight } from '../../icons/v1'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { Tooltip } from '../common/Tooltip'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { type Binding } from '../spreadsheet'; import { CellValue, CellValueText } from '../spreadsheet/CellValue'; import { useFormat } from '../spreadsheet/useFormat'; diff --git a/packages/desktop-client/src/components/manager/BudgetList.tsx b/packages/desktop-client/src/components/manager/BudgetList.tsx index 1cd0f5e3c96..72a3ebab0c0 100644 --- a/packages/desktop-client/src/components/manager/BudgetList.tsx +++ b/packages/desktop-client/src/components/manager/BudgetList.tsx @@ -34,7 +34,6 @@ import { SvgFileDouble, } from '../../icons/v1'; import { SvgCloudUnknown, SvgKey, SvgRefreshArrow } from '../../icons/v2'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { tokens } from '../../tokens'; import { Button } from '../common/Button2'; @@ -42,6 +41,7 @@ import { Menu } from '../common/Menu'; import { Popover } from '../common/Popover'; import { Text } from '../common/Text'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; function getFileDescription(file: File, t: (key: string) => string) { if (file.state === 'unknown') { diff --git a/packages/desktop-client/src/components/manager/ManagementApp.jsx b/packages/desktop-client/src/components/manager/ManagementApp.jsx index b9550088c6c..fc0dfc2aeb6 100644 --- a/packages/desktop-client/src/components/manager/ManagementApp.jsx +++ b/packages/desktop-client/src/components/manager/ManagementApp.jsx @@ -9,7 +9,6 @@ import { } from 'loot-core/client/actions'; import { useMetaThemeColor } from '../../hooks/useMetaThemeColor'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { tokens } from '../../tokens'; import { AppBackground } from '../AppBackground'; @@ -17,6 +16,7 @@ import { Text } from '../common/Text'; import { View } from '../common/View'; import { LoggedInUser } from '../LoggedInUser'; import { Notifications } from '../Notifications'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { useServerVersion } from '../ServerContext'; import { BudgetList } from './BudgetList'; diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx index 01829cc3445..220812f73e6 100644 --- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx +++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx @@ -20,9 +20,9 @@ import { } from '../../icons/v1'; import { SvgReports } from '../../icons/v1/Reports'; import { SvgCalendar } from '../../icons/v2'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme, styles } from '../../style'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { useScroll } from '../ScrollProvider'; const COLUMN_COUNT = 3; diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx index 577e6d5c23e..4709d8e2b9b 100644 --- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx +++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx @@ -30,7 +30,6 @@ import { SvgCheveronRight, } from '../../../icons/v1'; import { SvgViewShow } from '../../../icons/v2'; -import { useResponsive } from '../../../ResponsiveProvider'; import { theme, styles } from '../../../style'; import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover'; import { makeAmountGrey, makeBalanceAmountStyle } from '../../budget/util'; @@ -42,6 +41,7 @@ import { Text } from '../../common/Text'; import { View } from '../../common/View'; import { MobilePageHeader, Page } from '../../Page'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { CellValue } from '../../spreadsheet/CellValue'; import { useFormat } from '../../spreadsheet/useFormat'; import { useSheetValue } from '../../spreadsheet/useSheetValue'; diff --git a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx index b7ffdad3c8e..971aee302c9 100644 --- a/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/AccountAutocompleteModal.tsx @@ -1,6 +1,5 @@ import React, { type ComponentPropsWithoutRef } from 'react'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete'; import { @@ -11,6 +10,7 @@ import { } from '../common/Modal'; import { View } from '../common/View'; import { SectionLabel } from '../forms'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type AccountAutocompleteModalProps = { autocompleteProps: ComponentPropsWithoutRef; diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx index c9c2c8784d6..45d997cde1a 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -2,7 +2,6 @@ import React, { type ComponentPropsWithoutRef } from 'react'; import * as monthUtils from 'loot-core/src/shared/months'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete'; import { @@ -13,6 +12,7 @@ import { } from '../common/Modal'; import { View } from '../common/View'; import { SectionLabel } from '../forms'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { NamespaceContext } from '../spreadsheet/NamespaceContext'; type CategoryAutocompleteModalProps = { diff --git a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx index 49ed47a3344..22412ed3c48 100644 --- a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx +++ b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx @@ -13,7 +13,6 @@ import { type AccountEntity } from 'loot-core/src/types/models'; import { useAccounts } from '../../hooks/useAccounts'; import { useCategories } from '../../hooks/useCategories'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete'; import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete'; @@ -24,6 +23,7 @@ import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal'; import { Paragraph } from '../common/Paragraph'; import { Text } from '../common/Text'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; function needsCategory( account: AccountEntity, diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionDeleteModal.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionDeleteModal.tsx index e2b2cc1f730..6f1bf2ffdae 100644 --- a/packages/desktop-client/src/components/modals/ConfirmTransactionDeleteModal.tsx +++ b/packages/desktop-client/src/components/modals/ConfirmTransactionDeleteModal.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles } from '../../style'; import { Button } from '../common/Button2'; import { InitialFocus } from '../common/InitialFocus'; import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal'; import { Paragraph } from '../common/Paragraph'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type ConfirmTransactionDeleteProps = { message?: string; diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx index 67814dafc6d..d2695c0398f 100644 --- a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx +++ b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx @@ -9,7 +9,6 @@ import { loadAllFiles, loadGlobalPrefs, sync } from 'loot-core/client/actions'; import { send } from 'loot-core/src/platform/client/fetch'; import { getCreateKeyError } from 'loot-core/src/shared/errors'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { ButtonWithLoading } from '../common/Button2'; import { InitialFocus } from '../common/InitialFocus'; @@ -24,6 +23,7 @@ import { import { Paragraph } from '../common/Paragraph'; import { Text } from '../common/Text'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type CreateEncryptionKeyModalProps = { options: { diff --git a/packages/desktop-client/src/components/modals/EditFieldModal.jsx b/packages/desktop-client/src/components/modals/EditFieldModal.jsx index 275eeafc02a..449af0253f9 100644 --- a/packages/desktop-client/src/components/modals/EditFieldModal.jsx +++ b/packages/desktop-client/src/components/modals/EditFieldModal.jsx @@ -6,13 +6,13 @@ import { currentDay, dayFromDate } from 'loot-core/src/shared/months'; import { amountToInteger } from 'loot-core/src/shared/util'; import { useDateFormat } from '../../hooks/useDateFormat'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { Button } from '../common/Button2'; import { Input } from '../common/Input'; import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal'; import { View } from '../common/View'; import { SectionLabel } from '../forms'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { DateSelect } from '../select/DateSelect'; export function EditFieldModal({ name, onSubmit, onClose }) { diff --git a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx index 5621b9e0252..de826385606 100644 --- a/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx +++ b/packages/desktop-client/src/components/modals/FixEncryptionKeyModal.tsx @@ -6,7 +6,6 @@ import { type FinanceModals } from 'loot-core/src/client/state-types/modals'; import { send } from 'loot-core/src/platform/client/fetch'; import { getTestKeyError } from 'loot-core/src/shared/errors'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { Button, ButtonWithLoading } from '../common/Button2'; import { InitialFocus } from '../common/InitialFocus'; @@ -21,6 +20,7 @@ import { import { Paragraph } from '../common/Paragraph'; import { Text } from '../common/Text'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type FixEncryptionKeyModalProps = { options: FinanceModals['fix-encryption-key']; diff --git a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx index 1f9995b88c0..739c21af254 100644 --- a/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/PayeeAutocompleteModal.tsx @@ -3,7 +3,6 @@ import React, { type ComponentPropsWithoutRef } from 'react'; import { useAccounts } from '../../hooks/useAccounts'; import { useNavigate } from '../../hooks/useNavigate'; import { usePayees } from '../../hooks/usePayees'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete'; import { @@ -12,6 +11,7 @@ import { ModalTitle, ModalHeader, } from '../common/Modal'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type PayeeAutocompleteModalProps = { autocompleteProps: ComponentPropsWithoutRef; diff --git a/packages/desktop-client/src/components/reports/Header.tsx b/packages/desktop-client/src/components/reports/Header.tsx index c2ee67bb40b..ba820128284 100644 --- a/packages/desktop-client/src/components/reports/Header.tsx +++ b/packages/desktop-client/src/components/reports/Header.tsx @@ -7,13 +7,13 @@ import { } from 'loot-core/types/models'; import { useFeatureFlag } from '../../hooks/useFeatureFlag'; -import { useResponsive } from '../../ResponsiveProvider'; import { Button } from '../common/Button2'; import { Select } from '../common/Select'; import { SpaceBetween } from '../common/SpaceBetween'; import { View } from '../common/View'; import { AppliedFilters } from '../filters/AppliedFilters'; import { FilterButton } from '../filters/FiltersMenu'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { calculateTimeRange, diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx index c21661e9567..63a19226b6b 100644 --- a/packages/desktop-client/src/components/reports/Overview.tsx +++ b/packages/desktop-client/src/components/reports/Overview.tsx @@ -22,7 +22,6 @@ import { import { useAccounts } from '../../hooks/useAccounts'; import { useFeatureFlag } from '../../hooks/useFeatureFlag'; import { useNavigate } from '../../hooks/useNavigate'; -import { useResponsive } from '../../ResponsiveProvider'; import { breakpoints } from '../../tokens'; import { Button } from '../common/Button2'; import { Menu } from '../common/Menu'; @@ -31,6 +30,7 @@ import { Popover } from '../common/Popover'; import { View } from '../common/View'; import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; import { MobilePageHeader, Page, PageHeader } from '../Page'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; import { LoadingIndicator } from './LoadingIndicator'; diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 9954c118327..c2129bd95d6 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -10,12 +10,12 @@ import { type CustomReportEntity } from 'loot-core/src/types/models'; import { useIsInViewport } from '../../hooks/useIsInViewport'; import { useNavigate } from '../../hooks/useNavigate'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { Menu } from '../common/Menu'; import { MenuButton } from '../common/MenuButton'; import { Popover } from '../common/Popover'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx index d4dc36ebe39..2bfce1c38fd 100644 --- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx +++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx @@ -19,10 +19,10 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule'; import { useAccounts } from '../../../../hooks/useAccounts'; import { useCategories } from '../../../../hooks/useCategories'; import { useNavigate } from '../../../../hooks/useNavigate'; -import { useResponsive } from '../../../../ResponsiveProvider'; import { theme } from '../../../../style'; import { Text } from '../../../common/Text'; import { View } from '../../../common/View'; +import { useResponsive } from '../../../responsive/ResponsiveProvider'; import { Row, Cell } from '../../../table'; import { showActivity } from '../showActivity'; diff --git a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx index 4714ceb3bc4..012cb97b12d 100644 --- a/packages/desktop-client/src/components/reports/reports/CashFlow.tsx +++ b/packages/desktop-client/src/components/reports/reports/CashFlow.tsx @@ -18,7 +18,6 @@ import { import { useFilters } from '../../../hooks/useFilters'; import { useNavigate } from '../../../hooks/useNavigate'; -import { useResponsive } from '../../../ResponsiveProvider'; import { theme } from '../../../style'; import { AlignedText } from '../../common/AlignedText'; import { Block } from '../../common/Block'; @@ -30,6 +29,7 @@ import { EditablePageHeaderTitle } from '../../EditablePageHeaderTitle'; import { MobileBackButton } from '../../mobile/MobileBackButton'; import { MobilePageHeader, Page, PageHeader } from '../../Page'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { Change } from '../Change'; import { CashFlowGraph } from '../graphs/CashFlowGraph'; import { Header } from '../Header'; diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx index 8a31f038061..01eeb2e955f 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx @@ -23,7 +23,6 @@ import { useLocalPref } from '../../../hooks/useLocalPref'; import { useNavigate } from '../../../hooks/useNavigate'; import { usePayees } from '../../../hooks/usePayees'; import { useSyncedPref } from '../../../hooks/useSyncedPref'; -import { useResponsive } from '../../../ResponsiveProvider'; import { theme, styles } from '../../../style'; import { Warning } from '../../alerts'; import { AlignedText } from '../../common/AlignedText'; @@ -34,6 +33,7 @@ import { AppliedFilters } from '../../filters/AppliedFilters'; import { MobileBackButton } from '../../mobile/MobileBackButton'; import { MobilePageHeader, Page, PageHeader } from '../../Page'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { ChooseGraph } from '../ChooseGraph'; import { defaultsGraphList, diff --git a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx index 1221ee8d9a5..299f9999df6 100644 --- a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx +++ b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx @@ -9,10 +9,10 @@ import { type PayeeEntity } from 'loot-core/types/models/payee'; import { type CustomReportEntity } from 'loot-core/types/models/reports'; import { type SyncedPrefs } from 'loot-core/types/prefs'; -import { useResponsive } from '../../../ResponsiveProvider'; import { styles } from '../../../style/styles'; import { theme } from '../../../style/theme'; import { Text } from '../../common/Text'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { ChooseGraph } from '../ChooseGraph'; import { getLiveRange } from '../getLiveRange'; import { LoadingIndicator } from '../LoadingIndicator'; diff --git a/packages/desktop-client/src/components/reports/reports/NetWorth.tsx b/packages/desktop-client/src/components/reports/reports/NetWorth.tsx index 88e18302144..5b1f2c1765c 100644 --- a/packages/desktop-client/src/components/reports/reports/NetWorth.tsx +++ b/packages/desktop-client/src/components/reports/reports/NetWorth.tsx @@ -15,7 +15,6 @@ import { type TimeFrame, type NetWorthWidget } from 'loot-core/types/models'; import { useAccounts } from '../../../hooks/useAccounts'; import { useFilters } from '../../../hooks/useFilters'; import { useNavigate } from '../../../hooks/useNavigate'; -import { useResponsive } from '../../../ResponsiveProvider'; import { theme, styles } from '../../../style'; import { Button } from '../../common/Button2'; import { Paragraph } from '../../common/Paragraph'; @@ -24,6 +23,7 @@ import { EditablePageHeaderTitle } from '../../EditablePageHeaderTitle'; import { MobileBackButton } from '../../mobile/MobileBackButton'; import { MobilePageHeader, Page, PageHeader } from '../../Page'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { Change } from '../Change'; import { NetWorthGraph } from '../graphs/NetWorthGraph'; import { Header } from '../Header'; diff --git a/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx b/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx index 3c1ed32402c..866faef7e98 100644 --- a/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx +++ b/packages/desktop-client/src/components/reports/reports/NetWorthCard.tsx @@ -8,11 +8,11 @@ import { } from 'loot-core/src/types/models'; import { useFeatureFlag } from '../../../hooks/useFeatureFlag'; -import { useResponsive } from '../../../ResponsiveProvider'; import { styles } from '../../../style'; import { Block } from '../../common/Block'; import { View } from '../../common/View'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { Change } from '../Change'; import { DateRange } from '../DateRange'; import { NetWorthGraph } from '../graphs/NetWorthGraph'; diff --git a/packages/desktop-client/src/components/reports/reports/Spending.tsx b/packages/desktop-client/src/components/reports/reports/Spending.tsx index 39be69e0e26..53c85a3453b 100644 --- a/packages/desktop-client/src/components/reports/reports/Spending.tsx +++ b/packages/desktop-client/src/components/reports/reports/Spending.tsx @@ -16,7 +16,6 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule'; import { useFeatureFlag } from '../../../hooks/useFeatureFlag'; import { useFilters } from '../../../hooks/useFilters'; import { useNavigate } from '../../../hooks/useNavigate'; -import { useResponsive } from '../../../ResponsiveProvider'; import { theme, styles } from '../../../style'; import { AlignedText } from '../../common/AlignedText'; import { Block } from '../../common/Block'; @@ -33,6 +32,7 @@ import { FilterButton } from '../../filters/FiltersMenu'; import { MobileBackButton } from '../../mobile/MobileBackButton'; import { MobilePageHeader, Page, PageHeader } from '../../Page'; import { PrivacyFilter } from '../../PrivacyFilter'; +import { useResponsive } from '../../responsive/ResponsiveProvider'; import { SpendingGraph } from '../graphs/SpendingGraph'; import { LegendItem } from '../LegendItem'; import { LoadingIndicator } from '../LoadingIndicator'; diff --git a/packages/desktop-client/src/ResponsiveProvider.tsx b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx similarity index 59% rename from packages/desktop-client/src/ResponsiveProvider.tsx rename to packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx index 4a133866ca1..fbfe70436d1 100644 --- a/packages/desktop-client/src/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx @@ -1,10 +1,8 @@ -// @ts-strict-ignore -import { type ReactNode, createContext, useContext } from 'react'; +import { type ReactNode, createContext, useContext, useMemo } from 'react'; +import { breakpoints } from '../../tokens'; import { useViewportSize } from '@react-aria/utils'; -import { breakpoints } from './tokens'; - type TResponsiveContext = { atLeastMediumWidth: boolean; isNarrowWidth: boolean; @@ -15,20 +13,10 @@ type TResponsiveContext = { width: number; }; -const ResponsiveContext = createContext(null); +const ResponsiveContext = createContext(undefined); export function ResponsiveProvider(props: { children: ReactNode }) { - /* - * Ensure we render on every viewport size change, - * even though we're interested in document.documentElement.client - * clientWidth/Height are the document size, do not change on pinch-zoom, - * and are what our `min-width` media queries are reading - * Viewport size changes on pinch-zoom, which may be useful later when dealing with on-screen keyboards - */ - useViewportSize(); - - const height = document.documentElement.clientHeight; - const width = document.documentElement.clientWidth; + const { height, width } = useViewportSize(); // Possible view modes: narrow, small, medium, wide // To check if we're at least small width, check !isNarrowWidth @@ -52,5 +40,9 @@ export function ResponsiveProvider(props: { children: ReactNode }) { } export function useResponsive() { - return useContext(ResponsiveContext); + const context = useContext(ResponsiveContext); + if (!context) { + throw new Error('useResponsive must be used within a ResponsiveProvider'); + } + return context; } diff --git a/packages/desktop-client/src/components/responsive/index.tsx b/packages/desktop-client/src/components/responsive/index.tsx index 579f70009d8..ef3ccde56b5 100644 --- a/packages/desktop-client/src/components/responsive/index.tsx +++ b/packages/desktop-client/src/components/responsive/index.tsx @@ -1,7 +1,7 @@ -import { useResponsive } from '../../ResponsiveProvider'; import { LoadComponent } from '../util/LoadComponent'; import type * as NarrowComponents from './narrow'; +import { useResponsive } from './ResponsiveProvider'; import type * as WideComponents from './wide'; const loadNarrow = () => diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx index a2853315421..f65fabf8e21 100644 --- a/packages/desktop-client/src/components/settings/index.tsx +++ b/packages/desktop-client/src/components/settings/index.tsx @@ -10,7 +10,6 @@ import { useFeatureFlag } from '../../hooks/useFeatureFlag'; import { useGlobalPref } from '../../hooks/useGlobalPref'; import { useIsOutdated, useLatestVersion } from '../../hooks/useLatestVersion'; import { useMetadataPref } from '../../hooks/useMetadataPref'; -import { useResponsive } from '../../ResponsiveProvider'; import { theme } from '../../style'; import { tokens } from '../../tokens'; import { Button } from '../common/Button2'; @@ -21,6 +20,7 @@ import { View } from '../common/View'; import { FormField, FormLabel } from '../forms'; import { MOBILE_NAV_HEIGHT } from '../mobile/MobileNavTabs'; import { Page } from '../Page'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { useServerVersion } from '../ServerContext'; import { Backups } from './Backups'; diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx index a70840622d0..c9a17c6c08b 100644 --- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx +++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx @@ -15,7 +15,6 @@ import { useNavigate } from '../../hooks/useNavigate'; import { useResizeObserver } from '../../hooks/useResizeObserver'; import { SvgExpandArrow } from '../../icons/v0'; import { SvgAdd } from '../../icons/v1'; -import { useResponsive } from '../../ResponsiveProvider'; import { styles, theme } from '../../style'; import { Button } from '../common/Button2'; import { InitialFocus } from '../common/InitialFocus'; @@ -24,6 +23,7 @@ import { Menu } from '../common/Menu'; import { Popover } from '../common/Popover'; import { Text } from '../common/Text'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { Accounts } from './Accounts'; import { PrimaryButtons } from './PrimaryButtons'; diff --git a/packages/desktop-client/src/components/sidebar/SidebarProvider.tsx b/packages/desktop-client/src/components/sidebar/SidebarProvider.tsx index 717f3393e53..b56efb551f5 100644 --- a/packages/desktop-client/src/components/sidebar/SidebarProvider.tsx +++ b/packages/desktop-client/src/components/sidebar/SidebarProvider.tsx @@ -10,7 +10,7 @@ import React, { } from 'react'; import { useGlobalPref } from '../../hooks/useGlobalPref'; -import { useResponsive } from '../../ResponsiveProvider'; +import { useResponsive } from '../responsive/ResponsiveProvider'; type SidebarContextValue = { hidden: boolean; diff --git a/packages/desktop-client/src/components/sidebar/index.tsx b/packages/desktop-client/src/components/sidebar/index.tsx index e09f6099fe1..4fd72f93056 100644 --- a/packages/desktop-client/src/components/sidebar/index.tsx +++ b/packages/desktop-client/src/components/sidebar/index.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { useDebounceCallback } from 'usehooks-ts'; import { useGlobalPref } from '../../hooks/useGlobalPref'; -import { useResponsive } from '../../ResponsiveProvider'; import { View } from '../common/View'; +import { useResponsive } from '../responsive/ResponsiveProvider'; import { Sidebar } from './Sidebar'; import { useSidebar } from './SidebarProvider'; diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx index d8d58265f83..67cb2e937c2 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx @@ -23,7 +23,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util'; import { SelectedProviderWithItems } from '../../hooks/useSelected'; import { SplitsExpandedProvider } from '../../hooks/useSplitsExpanded'; -import { ResponsiveProvider } from '../../ResponsiveProvider'; +import { ResponsiveProvider } from '../responsive/ResponsiveProvider'; import { TransactionTable } from './TransactionsTable'; diff --git a/packages/desktop-client/src/components/util/LoadComponent.tsx b/packages/desktop-client/src/components/util/LoadComponent.tsx index cff5fe26ccf..07bfaf1d685 100644 --- a/packages/desktop-client/src/components/util/LoadComponent.tsx +++ b/packages/desktop-client/src/components/util/LoadComponent.tsx @@ -21,49 +21,46 @@ export function LoadComponent(props: LoadComponentProps) { return ; } -// Cache of the various modules so we would not need to -// load the same thing multiple times. -const localModuleCache = new Map(); - function LoadComponentInner({ name, message, importer, }: LoadComponentProps) { - const [Component, setComponent] = useState( - localModuleCache.get(name) ?? null, - ); - const [failedToLoad, setFailedToLoad] = useState(false); - const [failedToLoadException, setFailedToLoadException] = useState(null); + const [Component, setComponent] = useState(null); + const [error, setError] = useState(null); useEffect(() => { - if (localModuleCache.has(name)) { - return; - } - - setFailedToLoad(false); + let isUnmounted = false; + setError(null); + setComponent(null); // Load the module; if it fails - retry with exponential backoff promiseRetry( retry => importer() .then(module => { - const component = () => module[name]; - localModuleCache.set(name, component); - setComponent(component); + // Handle possibly being unmounted while retrying. + if (!isUnmounted) { + setComponent(() => module[name]); + } }) .catch(retry), { retries: 5, }, ).catch(e => { - setFailedToLoad(true); - setFailedToLoadException(e); + if (!isUnmounted) { + setError(e); + } }); + + return () => { + isUnmounted = true; + }; }, [name, importer]); - if (failedToLoad) { - throw new LazyLoadFailedError(name, failedToLoadException); + if (error) { + throw new LazyLoadFailedError(name, error); } if (!Component) { From fe0cd2df42dc9a0db90be8e35c8dd1e0f0437faa Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:27:14 -0700 Subject: [PATCH 2/6] Release notes --- upcoming-release-notes/3729.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/3729.md diff --git a/upcoming-release-notes/3729.md b/upcoming-release-notes/3729.md new file mode 100644 index 00000000000..a4278e8e67a --- /dev/null +++ b/upcoming-release-notes/3729.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [joel-jeremy] +--- + +Fix mobile/desktop views not change when window is resized (e.g. from portrait to landscape and vice versa) From 1e24e94e953ed451e550c38a8173c96e41715102 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:32:26 -0700 Subject: [PATCH 3/6] Fix lint --- .../src/components/responsive/ResponsiveProvider.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx index fbfe70436d1..32b23744292 100644 --- a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx @@ -1,8 +1,9 @@ -import { type ReactNode, createContext, useContext, useMemo } from 'react'; +import { type ReactNode, createContext, useContext } from 'react'; -import { breakpoints } from '../../tokens'; import { useViewportSize } from '@react-aria/utils'; +import { breakpoints } from '../../tokens'; + type TResponsiveContext = { atLeastMediumWidth: boolean; isNarrowWidth: boolean; @@ -13,7 +14,9 @@ type TResponsiveContext = { width: number; }; -const ResponsiveContext = createContext(undefined); +const ResponsiveContext = createContext( + undefined, +); export function ResponsiveProvider(props: { children: ReactNode }) { const { height, width } = useViewportSize(); From e4463ac042ac21ad40d5eebe6bae1dd79bc5287f Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:39:26 -0700 Subject: [PATCH 4/6] Use useWindowSize since it matches behavior of documentElement clientWidth and clientHeight --- .../src/components/responsive/ResponsiveProvider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx index 32b23744292..9d1f520c32d 100644 --- a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx @@ -1,6 +1,6 @@ import { type ReactNode, createContext, useContext } from 'react'; -import { useViewportSize } from '@react-aria/utils'; +import { useWindowSize } from 'usehooks-ts'; import { breakpoints } from '../../tokens'; @@ -19,7 +19,7 @@ const ResponsiveContext = createContext( ); export function ResponsiveProvider(props: { children: ReactNode }) { - const { height, width } = useViewportSize(); + const { height, width } = useWindowSize(); // Possible view modes: narrow, small, medium, wide // To check if we're at least small width, check !isNarrowWidth From 380c2bd46fb2069c4614d217dcd27cf04c990e18 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:41:50 -0700 Subject: [PATCH 5/6] Debounce so that components are only reloaded when user finishes the resize --- .../src/components/responsive/ResponsiveProvider.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx index 9d1f520c32d..7d33c175015 100644 --- a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx @@ -19,7 +19,9 @@ const ResponsiveContext = createContext( ); export function ResponsiveProvider(props: { children: ReactNode }) { - const { height, width } = useWindowSize(); + const { height, width } = useWindowSize({ + debounceDelay: 100, + }); // Possible view modes: narrow, small, medium, wide // To check if we're at least small width, check !isNarrowWidth From e55cfc234a4981048433f3197a1d4d36abdc47c2 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Sat, 19 Oct 2024 06:45:25 -0700 Subject: [PATCH 6/6] Adjust debounce delay --- .../src/components/responsive/ResponsiveProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx index 7d33c175015..38295d8f594 100644 --- a/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx +++ b/packages/desktop-client/src/components/responsive/ResponsiveProvider.tsx @@ -20,7 +20,7 @@ const ResponsiveContext = createContext( export function ResponsiveProvider(props: { children: ReactNode }) { const { height, width } = useWindowSize({ - debounceDelay: 100, + debounceDelay: 250, }); // Possible view modes: narrow, small, medium, wide