Reduce segment wait until load time

Summary:
https://phab.corp.pixielabs.ai/D6494 updated login so that we don't redirect the page until the segment analytics have been sent.
this makes the user waiting the "logging in" page until the segment callback is complete.
now that it is in prod, logging in just seems way too slow because of this wait. it takes 5 seconds on the "logging in" page.

after further investigation, its because the wait has to also wait for segment to load and initialize. we first wait for the CPU to be idle, then wait an addtional 5 seconds before loading segment.
i reduced this to 2 seconds, which seems more bearable for login.

if we want login to be snappier we would either:
- remove this timeout so that segment loads as soon as the CPU is idle.
or
- move the identify/track to another page. but by doign this, we will lose the login/logout event

Test Plan: ran in webpack

Reviewers: zasgar, #engineering

Reviewed By: zasgar, #engineering

Differential Revision: https://phab.corp.pixielabs.ai/D6518

GitOrigin-RevId: 88fc85688666a01f02a02c5c020d60c5bb0eb3ea

src/ui/src/pages/auth/callback.tsx

@@ -98,14 +98,19 @@ export const AuthCallbackPage = () => {
         });
         analytics.identify(response.data.userInfo.userID);
         if (isValidAnalytics()) {
-          await new Promise((resolve, reject) => { // Wait for analytics to be sent out before redirecting.
-            analytics.track('User logged up', (err) => {
-              if (err) {
-                reject();
-              }
-              resolve();
-            });
-          });
+          await Promise.race([
+            new Promise((resolve, reject) => { // Wait for analytics to be sent out before redirecting.
+              analytics.track('User logged up', (err) => {
+                if (err) {
+                  reject();
+                }
+                resolve();
+              });
+            }),
+            // Wait a maximum of 6s before redirecting. If it takes this long, it probably means that
+            // something in Segment failed to initialize/send.
+            new Promise((resolve) => setTimeout(resolve, 6000)),
+          ]);
         }
         return true;
       } catch (err) {

src/ui/src/segment.js

@@ -37,7 +37,7 @@
        * PLEASE NOTE!!!!
        *******************************************/
       // They function defers the loading of segment until the browser is idle,
-      // followed by waiting another 5 seconds. This significantly helps with page performance
+      // followed by waiting another 2 seconds. This significantly helps with page performance
       // because it defers loading of external resources.
       analytics.load = function(t, e) {
         idleCallback(() => {
@@ -49,7 +49,7 @@
             var a = document.getElementsByTagName('script')[0];
             a.parentNode.insertBefore(n, a);
             analytics._loadOptions = e;
-          }, 5000);
+          }, 2000);
         });
       };
       analytics.SNIPPET_VERSION = "4.1.0";