diff --git a/x-pack/plugins/osquery/public/components/app.tsx b/x-pack/plugins/osquery/public/components/app.tsx
index f4c805d375351..ef249d5b8c7aa 100644
--- a/x-pack/plugins/osquery/public/components/app.tsx
+++ b/x-pack/plugins/osquery/public/components/app.tsx
@@ -9,7 +9,17 @@
 
 import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTabs,
+  EuiTab,
+  EuiLoadingElastic,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+} from '@elastic/eui';
 import { useLocation } from 'react-router-dom';
 
 import { Container, Nav, Wrapper } from './layouts';
@@ -24,6 +34,24 @@ const OsqueryAppComponent = () => {
   const section = useMemo(() => location.pathname.split('/')[1] ?? 'overview', [location.pathname]);
   const { data: osqueryIntegration, isFetched } = useOsqueryIntegrationStatus();
 
+  if (!isFetched) {
+    return (
+      <EuiPage paddingSize="none">
+        <EuiPageBody>
+          <EuiPageContent
+            verticalPosition="center"
+            horizontalPosition="center"
+            paddingSize="none"
+            color="subdued"
+            hasShadow={false}
+          >
+            <EuiLoadingElastic size="xxl" />
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+
   if (isFetched && osqueryIntegration?.install_status !== 'installed') {
     return <OsqueryAppEmptyState />;
   }
diff --git a/x-pack/plugins/osquery/server/routes/status/create_status_route.ts b/x-pack/plugins/osquery/server/routes/status/create_status_route.ts
index 630ec8b3743c8..ae79ef851bed9 100644
--- a/x-pack/plugins/osquery/server/routes/status/create_status_route.ts
+++ b/x-pack/plugins/osquery/server/routes/status/create_status_route.ts
@@ -107,6 +107,50 @@ export const createStatusRoute = (router: IRouter, osqueryContext: OsqueryAppCon
             pkgName: OSQUERY_INTEGRATION_NAME,
           });
 
+          const agentPolicyIds = uniq(map(policyPackages?.items, 'policy_id'));
+          const agentPolicies = mapKeys(
+            await agentPolicyService?.getByIds(internalSavedObjectsClient, agentPolicyIds),
+            'id'
+          );
+
+          await Promise.all(
+            map(migrationObject.packs, async (packObject) => {
+              await internalSavedObjectsClient.create(
+                packSavedObjectType,
+                {
+                  // @ts-expect-error update types
+                  name: packObject.name,
+                  // @ts-expect-error update types
+                  description: packObject.description,
+                  // @ts-expect-error update types
+                  queries: convertPackQueriesToSO(packObject.queries),
+                  // @ts-expect-error update types
+                  enabled: packObject.enabled,
+                  created_at: new Date().toISOString(),
+                  created_by: 'system',
+                  updated_at: new Date().toISOString(),
+                  updated_by: 'system',
+                },
+                {
+                  // @ts-expect-error update types
+                  references: packObject.policy_ids.map((policyId: string) => ({
+                    id: policyId,
+                    name: agentPolicies[policyId].name,
+                    type: AGENT_POLICY_SAVED_OBJECT_TYPE,
+                  })),
+                  refresh: 'wait_for',
+                }
+              );
+            })
+          );
+
+          // delete unnecessary package policies
+          await packagePolicyService?.delete(
+            internalSavedObjectsClient,
+            esClient,
+            migrationObject.packagePoliciesToDelete
+          );
+
           // updatePackagePolicies
           await Promise.all(
             map(migrationObject.agentPolicyToPackage, async (value, key) => {
@@ -151,49 +195,6 @@ export const createStatusRoute = (router: IRouter, osqueryContext: OsqueryAppCon
               }
             })
           );
-
-          const agentPolicyIds = uniq(map(policyPackages?.items, 'policy_id'));
-          const agentPolicies = mapKeys(
-            await agentPolicyService?.getByIds(internalSavedObjectsClient, agentPolicyIds),
-            'id'
-          );
-
-          await Promise.all(
-            map(migrationObject.packs, async (packObject) => {
-              await internalSavedObjectsClient.create(
-                packSavedObjectType,
-                {
-                  // @ts-expect-error update types
-                  name: packObject.name,
-                  // @ts-expect-error update types
-                  description: packObject.description,
-                  // @ts-expect-error update types
-                  queries: convertPackQueriesToSO(packObject.queries),
-                  // @ts-expect-error update types
-                  enabled: packObject.enabled,
-                  created_at: new Date().toISOString(),
-                  created_by: 'system',
-                  updated_at: new Date().toISOString(),
-                  updated_by: 'system',
-                },
-                {
-                  // @ts-expect-error update types
-                  references: packObject.policy_ids.map((policyId: string) => ({
-                    id: policyId,
-                    name: agentPolicies[policyId].name,
-                    type: AGENT_POLICY_SAVED_OBJECT_TYPE,
-                  })),
-                  refresh: 'wait_for',
-                }
-              );
-            })
-          );
-
-          await packagePolicyService?.delete(
-            internalSavedObjectsClient,
-            esClient,
-            migrationObject.packagePoliciesToDelete
-          );
           // eslint-disable-next-line no-empty
         } catch (e) {}
       }