diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 5aafd1cdd..1957d29f5 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -31,6 +31,7 @@ import { Input, Modal, ModalContent, + Skeleton, UpgradePlanModal } from "@app/components/v2"; import { TabsObject } from "@app/components/v2/Tabs"; @@ -60,7 +61,7 @@ type ItemProps = { link?: string; }; -const learningItem = ({ +const LearningItem = ({ text, subText, complete, @@ -159,7 +160,7 @@ const learningItem = ({ ); }; -const learningItemSquare = ({ +const LearningItemSquare = ({ text, subText, complete, @@ -241,7 +242,7 @@ export default function Organization() { const router = useRouter(); - const { workspaces } = useWorkspace(); + const { workspaces, isLoading: isWorkspaceLoading } = useWorkspace(); const orgWorkspaces = workspaces?.filter( (workspace) => workspace.organization === localStorage.getItem("orgData.id") @@ -334,6 +335,8 @@ export default function Organization() { }); }, []); + const isWorkspaceEmpty = !isWorkspaceLoading && orgWorkspaces?.length === 0; + return (
@@ -366,6 +369,23 @@ export default function Organization() {
+ {isWorkspaceLoading && + Array.apply(0, Array(3)).map((_x, i) => ( +
+
+ +
+
+ +
+
+ +
+
+ ))} {orgWorkspaces .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) .map((workspace) => ( @@ -395,7 +415,7 @@ export default function Organization() {
))} - {orgWorkspaces.length === 0 && ( + {isWorkspaceEmpty && (

Onboarding Guide

- {learningItemSquare({ - text: "Watch Infisical demo", - subText: "Set up Infisical in 3 min.", - complete: hasUserClickedIntro, - icon: faHandPeace, - time: "3 min", - userAction: "intro_cta_clicked", - link: "https://www.youtube.com/watch?v=PK23097-25I" - })} - {orgWorkspaces.length !== 0 && - learningItemSquare({ - text: "Add your secrets", - subText: "Drop a .env file or type your secrets.", - complete: hasUserPushedSecrets, - icon: faPlus, - time: "1 min", - userAction: "first_time_secrets_pushed", - link: `/project/${orgWorkspaces[0]?._id}/secrets/overview` - })} - {learningItemSquare({ - text: "Invite your teammates", - subText: "Infisical is better used as a team.", - complete: usersInOrg, - icon: faUserPlus, - time: "2 min", - link: `/org/${router.query.id}/members?action=invite` - })} + + {orgWorkspaces.length !== 0 && ( + <> + + + + )}
- {learningItemSquare({ - text: "Join Infisical Slack", - subText: "Have any questions? Ask us!", - complete: hasUserClickedSlack, - icon: faSlack, - time: "1 min", - userAction: "slack_cta_clicked", - link: "https://infisical.com/slack" - })} +
{orgWorkspaces.length !== 0 && ( @@ -485,18 +508,19 @@ export default function Organization() { {false &&
}
)} - {orgWorkspaces.length !== 0 && - learningItem({ - text: "Integrate Infisical with your infrastructure", - subText: "Connect Infisical to various 3rd party services and platforms.", - complete: false, - icon: faPlug, - time: "15 min", - link: "https://infisical.com/docs/integrations/overview" - })} + {orgWorkspaces.length !== 0 && ( + + )}
)} -
+

Explore More