feat: loading states update (#3639)

* dev: implement layout skeleton loader and helper function * chore: implemented layout loader * chore: settings loader added * chore: cycle, module, view, pages, notification and projects loader added * chore: kanban loader improvement * chore: loader utils updated
makeplane · Feb 13, 2024 · b1989ba · b1989ba
1 parent 8313998
commit b1989ba
Show file tree

Hide file tree

Showing 51 changed files with 951 additions and 507 deletions.
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx
@@ -5,7 +5,7 @@ import { useCycle } from "hooks/store";
 // components
 import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles";
 // ui components
-import { Loader } from "@plane/ui";
+import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "components/ui";
 // types
 import { TCycleLayout, TCycleView } from "@plane/types";
 
@@ -25,6 +25,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     currentProjectDraftCycleIds,
     currentProjectUpcomingCycleIds,
     currentProjectCycleIds,
+    loader,
   } = useCycle();
 
   const cyclesList =
@@ -36,55 +37,32 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
       ? currentProjectUpcomingCycleIds
       : currentProjectCycleIds;
 
+  if (loader || !cyclesList)
+    return (
+      <>
+        {layout === "list" && <CycleModuleListLayout />}
+        {layout === "board" && <CycleModuleBoardLayout />}
+        {layout === "gantt" && <GanttLayoutLoader />}
+      </>
+    );
+
   return (
     <>
       {layout === "list" && (
-        <>
-          {cyclesList ? (
-            <CyclesList cycleIds={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
-          ) : (
-            <Loader className="space-y-4 p-8">
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-            </Loader>
-          )}
-        </>
+        <CyclesList cycleIds={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
       )}
 
       {layout === "board" && (
-        <>
-          {cyclesList ? (
-            <CyclesBoard
-              cycleIds={cyclesList}
-              filter={filter}
-              workspaceSlug={workspaceSlug}
-              projectId={projectId}
-              peekCycle={peekCycle}
-            />
-          ) : (
-            <Loader className="grid grid-cols-1 gap-9 p-8 md:grid-cols-2 lg:grid-cols-3">
-              <Loader.Item height="200px" />
-              <Loader.Item height="200px" />
-              <Loader.Item height="200px" />
-            </Loader>
-          )}
-        </>
+        <CyclesBoard
+          cycleIds={cyclesList}
+          filter={filter}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          peekCycle={peekCycle}
+        />
       )}
 
-      {layout === "gantt" && (
-        <>
-          {cyclesList ? (
-            <CyclesListGanttChartView cycleIds={cyclesList} workspaceSlug={workspaceSlug} />
-          ) : (
-            <Loader className="space-y-4">
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-              <Loader.Item height="50px" />
-            </Loader>
-          )}
-        </>
-      )}
+      {layout === "gantt" && <CyclesListGanttChartView cycleIds={cyclesList} workspaceSlug={workspaceSlug} />}
     </>
   );
 });
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
@@ -15,7 +15,8 @@ import { IntegrationService } from "services/integrations";
 import { Exporter, SingleExport } from "components/exporter";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { Button } from "@plane/ui";
+import { ImportExportSettingsLoader } from "components/ui";
 // icons
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // fetch-keys
@@ -158,12 +159,7 @@ const IntegrationGuide = observer(() => {
                   </div>
                 )
               ) : (
-                <Loader className="mt-6 grid grid-cols-1 gap-3">
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                  <Loader.Item height="40px" width="100%" />
-                </Loader>
+                <ImportExportSettingsLoader />
               )}
             </div>
           </div>

diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
@@ -14,7 +14,8 @@ import { IntegrationService } from "services/integrations";
 import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { Button } from "@plane/ui";
+import { ImportExportSettingsLoader } from "components/ui";
 // icons
 import { RefreshCw } from "lucide-react";
 // types
@@ -153,12 +154,7 @@ const IntegrationGuide = observer(() => {
                     </div>
                   )
                 ) : (
-                  <Loader className="mt-6 grid grid-cols-1 gap-3">
-                    <Loader.Item height="40px" width="100%" />
-                    <Loader.Item height="40px" width="100%" />
-                    <Loader.Item height="40px" width="100%" />
-                    <Loader.Item height="40px" width="100%" />
-                  </Loader>
+                  <ImportExportSettingsLoader />
                 )}
               </div>
             </div>

diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
@@ -168,7 +168,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
         )
       ) : (
         <Loader>
-          <Loader.Item height="35px" width="150px" />
+          <Loader.Item height="32px" width="64px" />
         </Loader>
       )}
     </div>

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -138,14 +138,14 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
         >
           <div
             className={cn(
-              "rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm transition-all hover:border-custom-border-400",
+              "rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
               { "hover:cursor-grab": !isDragDisabled },
               { "border-custom-primary-100": snapshot.isDragging },
               { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id }
             )}
           >
             <RenderIfVisible
-              classNames="space-y-2"
+              classNames="space-y-2 px-3 py-2"
               root={scrollableContainerRef}
               defaultHeight="100px"
               horizonatlOffset={50}

diff --git a/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -12,8 +12,7 @@ import { GlobalViewsAppliedFiltersRoot, IssuePeekOverview } from "components/iss
 import { SpreadsheetView } from "components/issues/issue-layouts";
 import { AllIssueQuickActions } from "components/issues/issue-layouts/quick-action-dropdowns";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
-// ui
-import { Spinner } from "@plane/ui";
+import { SpreadsheetLayoutLoader } from "components/ui";
 // types
 import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
 import { EIssueActions } from "../types";
@@ -178,64 +177,60 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   const isEditingAllowed = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
-  return (
-    <div className="relative flex h-full w-full flex-col overflow-hidden">
-      {!globalViewId || globalViewId !== dataViewId || loader === "init-loader" || !issueIds ? (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
-
-          {(issueIds ?? {}).length == 0 ? (
-            <EmptyState
-              image={emptyStateImage}
-              title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
-              description={
-                (workspaceProjectIds ?? []).length > 0
-                  ? currentViewDetails.description
-                  : "To create issues or manage your work, you need to create a project or be a part of one."
-              }
-              size="sm"
-              primaryButton={
-                (workspaceProjectIds ?? []).length > 0
-                  ? currentView !== "custom-view" && currentView !== "subscribed"
-                    ? {
-                        text: "Create new issue",
-                        onClick: () => {
-                          setTrackElement("All issues empty state");
-                          commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-                        },
-                      }
-                    : undefined
-                  : {
-                      text: "Start your first project",
-                      onClick: () => {
-                        setTrackElement("All issues empty state");
-                        commandPaletteStore.toggleCreateProjectModal(true);
-                      },
-                    }
+  if (loader === "init-loader" || !globalViewId || globalViewId !== dataViewId || !issueIds) {
+    return <SpreadsheetLayoutLoader />;
+  }
+
+  if (issueIds.length === 0) {
+    return (
+      <EmptyState
+        image={emptyStateImage}
+        title={(workspaceProjectIds ?? []).length > 0 ? currentViewDetails.title : "No project"}
+        description={
+          (workspaceProjectIds ?? []).length > 0
+            ? currentViewDetails.description
+            : "To create issues or manage your work, you need to create a project or be a part of one."
+        }
+        size="sm"
+        primaryButton={
+          (workspaceProjectIds ?? []).length > 0
+            ? currentView !== "custom-view" && currentView !== "subscribed"
+              ? {
+                  text: "Create new issue",
+                  onClick: () => {
+                    setTrackElement("All issues empty state");
+                    commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+                  },
+                }
+              : undefined
+            : {
+                text: "Start your first project",
+                onClick: () => {
+                  setTrackElement("All issues empty state");
+                  commandPaletteStore.toggleCreateProjectModal(true);
+                },
               }
-              disabled={!isEditingAllowed}
-            />
-          ) : (
-            <div className="relative h-full w-full overflow-auto">
-              <SpreadsheetView
-                displayProperties={issueFilters?.displayProperties ?? {}}
-                displayFilters={issueFilters?.displayFilters ?? {}}
-                handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
-                issueIds={issueIds}
-                quickActions={renderQuickActions}
-                handleIssues={handleIssues}
-                canEditProperties={canEditProperties}
-                viewId={globalViewId}
-              />
-            </div>
-          )}
-        </>
-      )}
+        }
+        disabled={!isEditingAllowed}
+      />
+    );
+  }
 
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
+      <div className="relative h-full w-full overflow-auto">
+        <SpreadsheetView
+          displayProperties={issueFilters?.displayProperties ?? {}}
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+          issueIds={issueIds}
+          quickActions={renderQuickActions}
+          handleIssues={handleIssues}
+          canEditProperties={canEditProperties}
+          viewId={globalViewId}
+        />
+      </div>
       {/* peek overview */}
       <IssuePeekOverview />
     </div>

diff --git a/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -13,7 +13,7 @@ import {
 } from "components/issues";
 import { EIssuesStoreType } from "constants/issue";
 // ui
-import { Spinner } from "@plane/ui";
+import { ListLayoutLoader } from "components/ui";
 
 export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   // router
@@ -36,31 +36,26 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
     }
   );
 
+  if (issues?.loader === "init-loader" || !issues?.groupedIssueIds) {
+    return <ListLayoutLoader />;
+  }
+
+  if (issues?.groupedIssueIds?.length === 0) {
+    return (
+      <div className="relative h-full w-full overflow-y-auto">
+        <ProjectArchivedEmptyState />
+      </div>
+    );
+  }
+
   if (!workspaceSlug || !projectId) return <></>;
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
       <ArchivedIssueAppliedFiltersRoot />
-
-      {issues?.loader === "init-loader" ? (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          {!issues?.groupedIssueIds ? (
-            <ProjectArchivedEmptyState />
-          ) : (
-            <>
-              <div className="relative h-full w-full overflow-auto">
-                <ArchivedIssueListLayout />
-              </div>
-
-              {/* peek overview */}
-              <IssuePeekOverview is_archived />
-            </>
-          )}
-        </>
-      )}
+      <div className="relative h-full w-full overflow-auto">
+        <ArchivedIssueListLayout />
+      </div>
+      <IssuePeekOverview is_archived />
     </div>
   );
 });