Stabilization performance pos MUI 9

src/caretogether-pwa/package.json

@@ -6,33 +6,35 @@
   "dependencies": {
     "@azure/msal-browser": "^3.19.0",
     "@azure/storage-blob": "^12.23.0",
-    "@date-io/date-fns": "^3.0.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@date-io/date-fns": "3.2.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/list": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@hookform/resolvers": "^5.2.2",
     "@microsoft/applicationinsights-react-js": "^17.3.0",
     "@microsoft/applicationinsights-web": "^3.3.0",
-    "@mui/icons-material": "^5.16.1",
-    "@mui/lab": "5.0.0-alpha.172",
-    "@mui/material": "^5.16.1",
-    "@mui/system": "^5.16.1",
-    "@mui/x-date-pickers": "^6.20.2",
+    "@mui/icons-material": "9.0.1",
+    "@mui/lab": "9.0.0-beta.3",
+    "@mui/material": "9.0.1",
+    "@mui/material-pigment-css": "9.0.1",
+    "@mui/system": "9.0.1",
+    "@mui/x-date-pickers": "9.3.0",
+    "@pigment-css/react": "0.0.30",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.5.2",
-    "date-fns": "^3.6.0",
+    "date-fns": "3.6.0",
     "dexie": "^3.2.7",
     "dexie-react-hooks": "^1.1.7",
     "posthog-js": "^1.369.2",
     "powerbi-client-react": "^2.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "react-hook-form": "^7.58.1",
-    "react-lazyload": "^3.2.1",
+    "react-is": "19.2.6",
     "react-router-dom": "^6.24.1",
     "react-to-print": "^3.0.5",
     "recoil": "^0.7.7",
@@ -44,9 +46,8 @@
     "@eslint/js": "^9.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-lazyload": "^3.2.3",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react-swc": "^4.3.0",
@@ -76,5 +77,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "overrides": {
+    "react-is": "19.2.6"
   }
 }

src/caretogether-pwa/src/Activities/ActivityTimeline.tsx

@@ -1,12 +1,12 @@
 import {
-  Timeline,
-  TimelineItem,
-  TimelineOppositeContent,
-  TimelineSeparator,
-  TimelineDot,
-  TimelineConnector,
-  TimelineContent,
-} from '@mui/lab';
+  AppTimeline,
+  AppTimelineConnector,
+  AppTimelineContent,
+  AppTimelineDot,
+  AppTimelineItem,
+  AppTimelineOppositeContent,
+  AppTimelineSeparator,
+} from '../Generic/AppTimeline';
 import { format } from 'date-fns';
 import {
   Activity,
@@ -39,7 +39,7 @@ import { buildGroupedV1ReferralTimelineEntries } from '../V1Referrals/referralTi
 type ActivityTimelineProps = {
   family: CombinedFamilyInfo;
   referrals: V1Referral[];
-  printContentRef: React.RefObject<HTMLDivElement>;
+  printContentRef: React.RefObject<HTMLDivElement | null>;
 };
 
 type ActivitySorting = 'activity' | 'created' | 'edited' | 'approved';
@@ -414,10 +414,10 @@ export function ActivityTimeline({
             return (
               <Box
                 key={activity.activityTimestampUtc?.toString()}
-                p={2}
-                border={note.isPinned ? 2 : 1}
-                borderRadius={2}
                 sx={{
+                  p: 2,
+                  border: note.isPinned ? 2 : 1,
+                  borderRadius: 2,
                   breakInside: 'avoid',
                   borderColor: note.isPinned ? 'primary.main' : undefined,
                   backgroundColor: note.isPinned
@@ -510,7 +510,7 @@ export function ActivityTimeline({
         </Stack>
       </div>
 
-      <Timeline position="right" sx={{ padding: 0 }}>
+      <AppTimeline position="right" sx={{ padding: 0 }}>
         <Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: 1 }}>
           <FormControl size="small" sx={{ minWidth: 160 }}>
             <InputLabel>Sort by</InputLabel>
@@ -539,10 +539,10 @@ export function ActivityTimeline({
                 Boolean(nextItem.note?.isPinned);
 
           return (
-            <TimelineItem key={`${item.kind}:${i}`}>
-              <TimelineOppositeContent sx={{ display: 'none' }} />
-              <TimelineSeparator>
-                <TimelineDot
+            <AppTimelineItem key={`${item.kind}:${i}`}>
+              <AppTimelineOppositeContent sx={{ display: 'none' }} />
+              <AppTimelineSeparator>
+                <AppTimelineDot
                   sx={{
                     width: 36,
                     height: 36,
@@ -562,12 +562,12 @@ export function ActivityTimeline({
                   ) : (
                     <EditIcon fontSize="small" />
                   )}
-                </TimelineDot>
+                </AppTimelineDot>
                 {!hideBottomConnector && i < mergedTimelineItems.length - 1 && (
-                  <TimelineConnector />
+                  <AppTimelineConnector />
                 )}
-              </TimelineSeparator>
-              <TimelineContent
+              </AppTimelineSeparator>
+              <AppTimelineContent
                 style={{
                   width: 200,
                   wordWrap: 'break-word',
@@ -650,13 +650,13 @@ export function ActivityTimeline({
                     </Box>
                   </>
                 )}
-              </TimelineContent>
-            </TimelineItem>
+              </AppTimelineContent>
+            </AppTimelineItem>
           );
         })}
 
         {noteAccessLevelDialog}
-      </Timeline>
+      </AppTimeline>
     </>
   );
 }

src/caretogether-pwa/src/AppRoutes.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo } from 'react';
-import { Dashboard } from './Dashboard/Dashboard';
 import {
   Navigate,
   Routes,
@@ -8,12 +7,6 @@ import {
   useNavigate,
   useParams,
 } from 'react-router-dom';
-import { V1Cases } from './V1Cases/V1Cases';
-import { Volunteers } from './Volunteers/Volunteers';
-import { Settings } from './Settings/SettingsRoutes';
-import { FamilyScreen } from './Families/FamilyScreen';
-import { Communities } from './Communities/Communities';
-import { UserProfile } from './UserProfile/UserProfile';
 import { useRecoilStateLoadable, useRecoilValue } from 'recoil';
 import {
   LocationContext,
@@ -25,14 +18,9 @@ import { ProgressBackdrop } from './Shell/ProgressBackdrop';
 import { useScopedTrace } from './Hooks/useScopedTrace';
 import { useLoadable } from './Hooks/useLoadable';
 import { useLocalStorage } from './Hooks/useLocalStorage';
-import { InboxScreen } from './Inbox/InboxScreen';
-import { FamilyScreenV2 } from './Families/FamilyScreenV2';
 import { familyScreenV2State } from './Families/familyScreenV2State';
 import { usePostHogIdentify } from './Utilities/Instrumentation/usePostHogIdentify';
 import { usePostHogGroups } from './Utilities/Instrumentation/usePostHogGroups';
-import { Support } from './Support';
-import { Reports } from './Reports/Reports';
-import { V1Referrals } from './V1Referrals/V1Referrals';
 import {
   firstAccessibleLocation,
   hasLocationAccess,
@@ -42,6 +30,67 @@ import {
 import { NoOrganizationAccessScreen } from './Access/NoOrganizationAccessScreen';
 import { RootRoute } from './Access/RootRoute';
 
+const Dashboard = React.lazy(() =>
+  import('./Dashboard/Dashboard').then((module) => ({
+    default: module.Dashboard,
+  }))
+);
+const InboxScreen = React.lazy(() =>
+  import('./Inbox/InboxScreen').then((module) => ({
+    default: module.InboxScreen,
+  }))
+);
+const FamilyScreen = React.lazy(() =>
+  import('./Families/FamilyScreen').then((module) => ({
+    default: module.FamilyScreen,
+  }))
+);
+const FamilyScreenV2 = React.lazy(() =>
+  import('./Families/FamilyScreenV2').then((module) => ({
+    default: module.FamilyScreenV2,
+  }))
+);
+const V1Cases = React.lazy(() =>
+  import('./V1Cases/V1Cases').then((module) => ({
+    default: module.V1Cases,
+  }))
+);
+const V1Referrals = React.lazy(() =>
+  import('./V1Referrals/V1Referrals').then((module) => ({
+    default: module.V1Referrals,
+  }))
+);
+const Volunteers = React.lazy(() =>
+  import('./Volunteers/Volunteers').then((module) => ({
+    default: module.Volunteers,
+  }))
+);
+const Communities = React.lazy(() =>
+  import('./Communities/Communities').then((module) => ({
+    default: module.Communities,
+  }))
+);
+const Reports = React.lazy(() =>
+  import('./Reports/Reports').then((module) => ({
+    default: module.Reports,
+  }))
+);
+const Settings = React.lazy(() =>
+  import('./Settings/SettingsRoutes').then((module) => ({
+    default: module.Settings,
+  }))
+);
+const Support = React.lazy(() =>
+  import('./Support').then((module) => ({
+    default: module.Support,
+  }))
+);
+const UserProfile = React.lazy(() =>
+  import('./UserProfile/UserProfile').then((module) => ({
+    default: module.UserProfile,
+  }))
+);
+
 function RouteMigrator() {
   const trace = useScopedTrace('RouteMigrator');
   const location = useLocation();
@@ -184,23 +233,31 @@ function AuthorizedLocationContextWrapper({
       selectedLocationContext.contents.organizationId === organizationId &&
       selectedLocationContext.contents.locationId === locationId ? (
       <ShellRootLayout>
-        <Routes>
-          <Route index element={<Dashboard />} />
-          <Route path="inbox/*" element={<InboxScreen />} />
-          <Route
-            path="families/:familyId"
-            element={familyScreenV2 ? <FamilyScreenV2 /> : <FamilyScreen />}
-          />
-          <Route path="clients/*" element={<V1Cases />} />
-          <Route path="cases/*" element={<CasesToClientsRedirect />} />
-          <Route path="referrals/*" element={<V1Referrals />} />
-          <Route path="volunteers/*" element={<Volunteers />} />
-          <Route path="communities/*" element={<Communities />} />
-          <Route path="reports/*" element={<Reports />} />
-          <Route path="settings/*" element={<Settings />} />
-          <Route path="support/*" element={<Support />} />
-          <Route path="*" element={<RouteError />} />
-        </Routes>
+        <React.Suspense
+          fallback={
+            <ProgressBackdrop opaque>
+              <p>Loading page...</p>
+            </ProgressBackdrop>
+          }
+        >
+          <Routes>
+            <Route index element={<Dashboard />} />
+            <Route path="inbox/*" element={<InboxScreen />} />
+            <Route
+              path="families/:familyId"
+              element={familyScreenV2 ? <FamilyScreenV2 /> : <FamilyScreen />}
+            />
+            <Route path="clients/*" element={<V1Cases />} />
+            <Route path="cases/*" element={<CasesToClientsRedirect />} />
+            <Route path="referrals/*" element={<V1Referrals />} />
+            <Route path="volunteers/*" element={<Volunteers />} />
+            <Route path="communities/*" element={<Communities />} />
+            <Route path="reports/*" element={<Reports />} />
+            <Route path="settings/*" element={<Settings />} />
+            <Route path="support/*" element={<Support />} />
+            <Route path="*" element={<RouteError />} />
+          </Routes>
+        </React.Suspense>
       </ShellRootLayout>
     ) : (
       <ProgressBackdrop opaque>
@@ -274,7 +331,17 @@ export function AppRoutes() {
       />
       <Route
         path="/me/*"
-        /*TODO: This needs a shell!*/ element={<UserProfile />}
+        /*TODO: This needs a shell!*/ element={
+          <React.Suspense
+            fallback={
+              <ProgressBackdrop opaque>
+                <p>Loading profile...</p>
+              </ProgressBackdrop>
+            }
+          >
+            <UserProfile />
+          </React.Suspense>
+        }
       />
       {/* The following routes are only kept for migration/fallback purposes. */}
       <Route path="/families/:familyId" element={<RouteMigrator />} />

src/caretogether-pwa/src/Communities/AddEditCommunity.tsx

@@ -1,4 +1,5 @@
-import { Button, Grid, TextField } from '@mui/material';
+import { Button, TextField } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import {
   Community,
   CreateCommunity,
@@ -68,11 +69,11 @@ export function AddEditCommunity({
   }
 
   return (
-    <Grid container spacing={2} maxWidth={500}>
-      <Grid item xs={12}>
+    <Grid container spacing={2} sx={{ maxWidth: 500 }}>
+      <Grid size={12}>
         <h3>{community ? 'Edit Community' : 'Add New Community'}</h3>
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -84,7 +85,7 @@ export function AddEditCommunity({
           onChange={(e) => setName(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12}>
+      <Grid size={12}>
         <TextField
           type="text"
           fullWidth
@@ -96,7 +97,7 @@ export function AddEditCommunity({
           onChange={(e) => setDescription(e.target.value)}
         />
       </Grid>
-      <Grid item xs={12} sx={{ textAlign: 'right' }}>
+      <Grid size={12} sx={{ textAlign: 'right' }}>
         <Button
           color="secondary"
           variant="contained"