perf: App start improvement [INS-3957]

packages/insomnia/src/models/organization.ts

@@ -28,3 +28,12 @@ export const isOwnerOfOrganization = ({
   accountId: string;
 }) =>
   organization.metadata.ownerAccountId === accountId;
+
+export const findPersonalOrganization = (organizations: Organization[], accountId: string) => {
+  return organizations.filter(isPersonalOrganization)
+    .find(organization =>
+      isOwnerOfOrganization({
+        organization,
+        accountId,
+      }));
+};

packages/insomnia/src/sync/vcs/migrate-projects-into-organization.ts

@@ -1,6 +1,5 @@
 import { database } from '../../common/database';
 import * as models from '../../models';
-import { Organization } from '../../models/organization';
 import { Project, RemoteProject } from '../../models/project';
 
 // Migration:
@@ -32,9 +31,9 @@ export const shouldMigrateProjectUnderOrganization = async () => {
 };
 
 export const migrateProjectsIntoOrganization = async ({
-  personalOrganization,
+  personalOrganizationId,
 }: {
-  personalOrganization: Organization;
+    personalOrganizationId: string;
   }) => {
   // Legacy remote projects without organizations
   // Local projects without organizations except scratchpad
@@ -65,7 +64,7 @@ export const migrateProjectsIntoOrganization = async ({
   for (const localProject of localProjects) {
     updatePromises.push(
       models.project.update(localProject, {
-        parentId: personalOrganization.id,
+        parentId: personalOrganizationId,
       })
     );
   }

packages/insomnia/src/ui/hooks/use-loader-defer-data.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export const useLoaderDeferData = <T>(deferedDataPromise?: Promise<T>): [T | undefined, boolean, any] => {
+  const [data, setData] = useState<T>();
+  const [error, setError] = useState();
+  const [isPending, setIsPending] = useState(true);
+  useEffect(() => {
+    if (deferedDataPromise === undefined) {
+      return;
+    }
+    (async () => {
+      try {
+        const data = await deferedDataPromise;
+        setIsPending(false);
+        setData(data);
+      } catch (err) {
+        setError(err);
+        console.log('Failed to load defered data', err);
+      }
+    })();
+  }, [deferedDataPromise]);
+
+  return [data, isPending, error];
+};

packages/insomnia/src/ui/index.tsx

@@ -25,6 +25,7 @@ import { initNewOAuthSession } from '../network/o-auth-2/get-token';
 import { init as initPlugins } from '../plugins';
 import { applyColorScheme } from '../plugins/misc';
 import { invariant } from '../utils/invariant';
+import { getInitialEntry } from '../utils/router';
 import { AppLoadingIndicator } from './components/app-loading-indicator';
 import Auth from './routes/auth';
 import Authorize from './routes/auth.authorize';
@@ -62,34 +63,6 @@ try {
   console.log('[onboarding] Failed to parse session data', e);
 }
 
-async function getInitialEntry() {
-  // If the user has not seen the onboarding, then show it
-  // Otherwise if the user is not logged in and has not logged in before, then show the login
-  // Otherwise if the user is logged in, then show the organization
-  try {
-    const hasSeenOnboardingV9 = Boolean(window.localStorage.getItem('hasSeenOnboardingV9'));
-
-    if (!hasSeenOnboardingV9) {
-      return '/onboarding';
-    }
-
-    const hasUserLoggedInBefore = window.localStorage.getItem('hasUserLoggedInBefore');
-
-    const user = await models.userSession.getOrCreate();
-    if (user.id) {
-      return '/organization';
-    }
-
-    if (hasUserLoggedInBefore) {
-      return '/auth/login';
-    }
-
-    return '/organization/org_scratchpad/project/proj_scratchpad/workspace/wrk_scratchpad/debug';
-  } catch (e) {
-    return '/organization/org_scratchpad/project/proj_scratchpad/workspace/wrk_scratchpad/debug';
-  }
-}
-
 async function renderApp() {
   await database.initClient();
   await initPlugins();
@@ -202,6 +175,10 @@ async function renderApp() {
                 path: 'sync',
                 action: async (...args) => (await import('./routes/organization')).syncOrganizationsAction(...args),
               },
+              {
+                path: 'syncOrgsAndProjectsAction',
+                action: async (...args) => (await import('./routes/organization')).syncOrgsAndProjectsAction(...args),
+              },
               {
                 path: ':organizationId',
                 id: ':organizationId',

packages/insomnia/src/ui/routes/organization.tsx

@@ -30,7 +30,7 @@ import { getAppWebsiteBaseURL } from '../../common/constants';
 import { database } from '../../common/database';
 import { userSession } from '../../models';
 import { updateLocalProjectToRemote } from '../../models/helpers/project';
-import { isOwnerOfOrganization, isPersonalOrganization, isScratchpadOrganizationId, Organization } from '../../models/organization';
+import { findPersonalOrganization, isOwnerOfOrganization, isPersonalOrganization, isScratchpadOrganizationId, Organization } from '../../models/organization';
 import { Project } from '../../models/project';
 import { isDesign, isScratchpad } from '../../models/workspace';
 import { VCSInstance } from '../../sync/vcs/insomnia-sync';
@@ -53,6 +53,7 @@ import { PresentUsers } from '../components/present-users';
 import { Toast } from '../components/toast';
 import { useAIContext } from '../context/app/ai-context';
 import { InsomniaEventStreamProvider } from '../context/app/insomnia-event-stream-context';
+import { syncProjects } from './project';
 import { useRootLoaderData } from './root';
 import { UntrackedProjectsLoaderData } from './untracked-projects';
 import { WorkspaceLoaderData } from './workspace';
@@ -128,7 +129,7 @@ function sortOrganizations(accountId: string, organizations: Organization[]): Or
   ];
 }
 
-async function syncOrganization(sessionId: string, accountId: string) {
+async function syncOrganizations(sessionId: string, accountId: string) {
   try {
     const [organizationsResult, user, currentPlan] = await Promise.all([
       insomniaFetch<OrganizationsResponse | void>({
@@ -164,52 +165,89 @@ async function syncOrganization(sessionId: string, accountId: string) {
   }
 }
 
+interface SyncOrgsAndProjectsActionRequest {
+  sessionId: string;
+  accountId: string;
+  personalOrganizationId?: string;
+  organizationId: string;
+}
+
+// this action is used to run task that we dont want to block the UI
+export const syncOrgsAndProjectsAction: ActionFunction = async ({ request }) => {
+  try {
+    const { organizationId } = await request.json() as SyncOrgsAndProjectsActionRequest;
+    const { id: sessionId, accountId } = await userSession.getOrCreate();
+
+    invariant(sessionId, 'sessionId is required');
+    invariant(accountId, 'accountId is required');
+    const taskPromiseList = [];
+    taskPromiseList.push(syncOrganizations(sessionId, accountId));
+    const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
+    invariant(organizations, 'Failed to fetch organizations.');
+    const personalOrganization = findPersonalOrganization(organizations, accountId);
+    invariant(personalOrganization, 'personalOrganization is required');
+    invariant(personalOrganization.id, 'personalOrganizationId is required');
+    taskPromiseList.push(migrateProjectsUnderOrganization(personalOrganization.id, sessionId));
+    invariant(organizationId, 'organizationId is required');
+    taskPromiseList.push(syncProjects(organizationId));
+
+    await Promise.all(taskPromiseList);
+
+    return {};
+  } catch (error) {
+    console.log('Failed to run async task', error);
+    return {
+      error: error.message,
+    };
+  }
+};
+
+async function migrateProjectsUnderOrganization(personalOrganizationId: string, sessionId: string) {
+  if (await shouldMigrateProjectUnderOrganization()) {
+    await migrateProjectsIntoOrganization({
+      personalOrganizationId,
+    });
+
+    const preferredProjectType = localStorage.getItem('prefers-project-type');
+    if (preferredProjectType === 'remote') {
+      const localProjects = await database.find<Project>('Project', {
+        parentId: personalOrganizationId,
+        remoteId: null,
+      });
+
+      // If any of those fail projects will still be under the organization as local projects
+      for (const project of localProjects) {
+        updateLocalProjectToRemote({
+          project,
+          organizationId: personalOrganizationId,
+          sessionId,
+          vcs: VCSInstance(),
+        });
+      }
+    }
+  }
+};
+
 export const indexLoader: LoaderFunction = async () => {
   const { id: sessionId, accountId } = await userSession.getOrCreate();
   if (sessionId) {
-    await syncOrganization(sessionId, accountId);
+    await syncOrganizations(sessionId, accountId);
 
     const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
     invariant(organizations, 'Failed to fetch organizations.');
 
-    const personalOrganization = organizations.filter(isPersonalOrganization)
-        .find(organization =>
-          isOwnerOfOrganization({
-            organization,
-            accountId,
-          }));
-      invariant(personalOrganization, 'Failed to find personal organization your account appears to be in an invalid state. Please contact support if this is a recurring issue.');
-      if (await shouldMigrateProjectUnderOrganization()) {
-        await migrateProjectsIntoOrganization({
-          personalOrganization,
-        });
-
-        const preferredProjectType = localStorage.getItem('prefers-project-type');
-        if (preferredProjectType === 'remote') {
-          const localProjects = await database.find<Project>('Project', {
-            parentId: personalOrganization.id,
-            remoteId: null,
-          });
-
-          // If any of those fail projects will still be under the organization as local projects
-          for (const project of localProjects) {
-            updateLocalProjectToRemote({
-              project,
-              organizationId: personalOrganization.id,
-              sessionId,
-              vcs: VCSInstance(),
-            });
-          }
-        }
-      }
+    const personalOrganization = findPersonalOrganization(organizations, accountId);
+    invariant(personalOrganization, 'Failed to find personal organization your account appears to be in an invalid state. Please contact support if this is a recurring issue.');
+    const personalOrganizationId = personalOrganization.id;
+    await migrateProjectsUnderOrganization(personalOrganizationId, sessionId);
 
-      if (personalOrganization) {
-        return redirect(`/organization/${personalOrganization.id}`);
-      }
+    if (personalOrganization) {
+      return redirect(`/organization/${personalOrganizationId}`);
+    }
 
-      if (organizations.length > 0) {
-        return redirect(`/organization/${organizations[0].id}`);
-      }
+    if (organizations.length > 0) {
+      return redirect(`/organization/${organizations[0].id}`);
+    }
   }
 
   await session.logout();
@@ -220,7 +258,7 @@ export const syncOrganizationsAction: ActionFunction = async () => {
   const { id: sessionId, accountId } = await userSession.getOrCreate();
 
   if (sessionId) {
-    await syncOrganization(sessionId, accountId);
+    await syncOrganizations(sessionId, accountId);
   }
 
   return null;
@@ -400,6 +438,21 @@ const OrganizationRoute = () => {
     projectId?: string;
     workspaceId?: string;
   };
+  const syncOrgsAndProjects = useFetcher();
+
+  useEffect(() => {
+    console.log('run async task in useEffect');
+    const isIdleAndUninitialized = syncOrgsAndProjects.state === 'idle' && !syncOrgsAndProjects.data;
+    if (isIdleAndUninitialized) {
+      syncOrgsAndProjects.submit({
+        organizationId,
+      }, {
+        action: '/organization/syncOrgsAndProjectsAction',
+        method: 'POST',
+        encType: 'application/json',
+      });
+    }
+  }, [userSession.id, organizationId, userSession.accountId, syncOrgsAndProjects]);
 
   useEffect(() => {
     const isIdleAndUninitialized = untrackedProjectsFetcher.state === 'idle' && !untrackedProjectsFetcher.data;