MPDX-7878 Performance Enhancements and Codebase Simplification

amplify.yml

@@ -6,23 +6,24 @@ frontend:
         - nvm install 18.13
         - nvm use 18.13
         - |
-          if [[ "${AWS_BRANCH_ARN#*/branches/}" == *"pr-"* ]]; then
+          if [[ "${AWS_BRANCH_ARN#*/branches/}" != "main" ]] && [["${AWS_BRANCH_ARN#*/branches/}" != "staging"]]; then
             PREVIEW_URL="https://${AWS_BRANCH_ARN#*/branches/}.${AWS_APP_ID}.amplifyapp.com";
             NEXTAUTH_URL=$PREVIEW_URL;
             echo "PREVIEW_URL=$PREVIEW_URL" >> .env;
-          elif [[ "${AWS_BRANCH}" != "main" && "${AWS_BRANCH}" != "staging" ]]; then
-            PREVIEW_URL="https://${AWS_BRANCH}.${AWS_APP_ID}.amplifyapp.com";
-            NEXTAUTH_URL=$PREVIEW_URL;
-            echo "PREVIEW_URL=$PREVIEW_URL" >> .env;
           fi
         - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
         - echo "NODE_ENV=$NODE_ENV" >> .env
-        - yarn set version 3.3.0
+        - yarn set version 3.2.3
         - yarn config set nodeLinker node-modules
         - yarn -v
         - yarn
         - yarn disable-telemetry
-        - yarn gql
+        - |
+          if [[ "${AWS_BRANCH_ARN#*/branches/}" != "main" ]] && [["${AWS_BRANCH_ARN#*/branches/}" != "staging"]]; then
+            API_URL=https://api.mpdx.org/graphql yarn gql
+          else
+            yarn gql
+          fi
     build:
       commands:
         - yarn build:amplify

package.json

@@ -81,7 +81,7 @@
     "react-dnd-html5-backend": "^14.0.2",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
-    "react-virtuoso": "2.19.0",
+    "react-virtuoso": "^4.7.4",
     "recharts": "2.3.2",
     "rollbar": "^2.25.2",
     "storybook": "^6.5.16",

pages/_app.page.tsx

@@ -35,8 +35,7 @@
 import makeClient from 'src/lib/apollo/client';
 import i18n from 'src/lib/i18n';
 import theme from 'src/theme';
-import './helpscout.css';
-import './print.css';
+import './styles.css';
 
 export type PageWithLayout = NextPage & {
   layout?: React.FC;

pages/_document.page.tsx

@@ -22,13 +22,20 @@
             href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap"
             rel="stylesheet"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap"
+            rel="preload"
+            as="font"
+            type="font/woff2"
+            crossOrigin="true"
+          />
           {process.env.DATADOG_CONFIGURED === 'true' && (
-            <Script id="datadog-rum" strategy="afterInteractive">
+            <Script id="datadog-rum" strategy="lazyOnload">
               {`!function(a,e,t,n,s){a=a[s]=a[s]||{q:[],onReady:function(e){a.q.push(e)}},(s=e.createElement(t)).async=1,s.src=n,(n=e.getElementsByTagName(t)[0]).parentNode.insertBefore(s,n)}(window,document,"script","https://www.datadoghq-browser-agent.com/datadog-rum-v5.js","DD_RUM"),DD_RUM.onReady(function(){DD_RUM.init({clientToken:"${process.env.DATADOG_CLIENT_TOKEN}",applicationId:"${process.env.DATADOG_APP_ID}",site:"datadoghq.com",service:"mpdx-web-react",sessionSampleRate:100,sessionReplaySampleRate:20,trackUserInteractions:!0,trackResources:!0,trackLongTasks:!0,defaultPrivacyLevel:"mask-user-input",env:"${process.env.DD_ENV}",allowedTracingUrls:["${process.env.API_URL}"]})});`}
             </Script>
           )}
           {process.env.GOOGLE_TAG_MANAGER_CONTAINER_ID && (
-            <Script id="google-analytics" strategy="afterInteractive">
+            <Script id="google-analytics" strategy="lazyOnload">
               {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${process.env.GOOGLE_TAG_MANAGER_CONTAINER_ID}');`}
             </Script>
           )}

pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx

@@ -24,6 +24,7 @@ import {
 } from 'src/components/Shared/Header/ListHeader';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
 import { TaskRow } from 'src/components/Task/TaskRow/TaskRow';
+import { TaskRowSkeleton } from 'src/components/Task/TaskRow/TaskRowSkeleton.skeleton';
 import { TaskFilterSetInput } from 'src/graphql/types.generated';
 import { useGetTaskIdsForMassSelectionQuery } from 'src/hooks/GetIdsForMassSelection.generated';
 import { useAccountListId } from 'src/hooks/useAccountListId';
@@ -402,6 +403,8 @@ const TasksPage: React.FC = () => {
                       data-foo="bar"
                       loading={loading}
                       data={data?.tasks.nodes}
+                      Skeleton={TaskRowSkeleton}
+                      numberOfSkeletons={25}
                       style={{
                         height: `calc(100vh - ${navBarHeight} - ${headerHeight} - ${buttonBarHeight})`,
                       }}