From 1c558eb6b3fbd7882377251258d6c3ebf5945ceb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 11 Jun 2024 17:35:54 +0530
Subject: [PATCH] [WEB-1555] fix: analytics empty state flicker (#4754)

* fix: analytics empty state flicker

* chore: todo added
---
 .../(projects)/analytics/page.tsx             | 85 ++++++++++---------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index 5fd4104ee..240993a24 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -20,53 +20,58 @@ const AnalyticsPage = observer(() => {
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-  const { workspaceProjectIds } = useProject();
+  const { workspaceProjectIds, loader } = useProject();
   const { currentWorkspace } = useWorkspace();
   // derived values
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Analytics` : undefined;
 
+  // TODO: refactor loader implementation
   return (
     <>
       <PageHead title={pageTitle} />
-      {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
-        <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
-          <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
-            <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
-              {ANALYTICS_TABS.map((tab) => (
-                <Tab key={tab.key} as={Fragment}>
-                  {({ selected }) => (
-                    <button
-                      className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
-                        selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
-                      }`}
-                    >
-                      {tab.title}
-                      <div
-                        className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
-                      />
-                    </button>
-                  )}
-                </Tab>
-              ))}
-            </Tab.List>
-            <Tab.Panels as={Fragment}>
-              <Tab.Panel as={Fragment}>
-                <ScopeAndDemand fullScreen />
-              </Tab.Panel>
-              <Tab.Panel as={Fragment}>
-                <CustomAnalytics fullScreen />
-              </Tab.Panel>
-            </Tab.Panels>
-          </Tab.Group>
-        </div>
-      ) : (
-        <EmptyState
-          type={EmptyStateType.WORKSPACE_ANALYTICS}
-          primaryButtonOnClick={() => {
-            setTrackElement("Analytics empty state");
-            toggleCreateProjectModal(true);
-          }}
-        />
+      {workspaceProjectIds && (
+        <>
+          {workspaceProjectIds.length > 0 || loader ? (
+            <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
+              <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
+                <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
+                  {ANALYTICS_TABS.map((tab) => (
+                    <Tab key={tab.key} as={Fragment}>
+                      {({ selected }) => (
+                        <button
+                          className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                            selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                          }`}
+                        >
+                          {tab.title}
+                          <div
+                            className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                          />
+                        </button>
+                      )}
+                    </Tab>
+                  ))}
+                </Tab.List>
+                <Tab.Panels as={Fragment}>
+                  <Tab.Panel as={Fragment}>
+                    <ScopeAndDemand fullScreen />
+                  </Tab.Panel>
+                  <Tab.Panel as={Fragment}>
+                    <CustomAnalytics fullScreen />
+                  </Tab.Panel>
+                </Tab.Panels>
+              </Tab.Group>
+            </div>
+          ) : (
+            <EmptyState
+              type={EmptyStateType.WORKSPACE_ANALYTICS}
+              primaryButtonOnClick={() => {
+                setTrackElement("Analytics empty state");
+                toggleCreateProjectModal(true);
+              }}
+            />
+          )}
+        </>
       )}
     </>
   );