awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 10:27:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added loading state and show empty state only when loading for org overview page

Browse Source
This commit is contained in:
akhilmhdh
2023-07-28 21:33:31 +05:30
parent 3682c4d044
commit 06bc02c392
1 changed files with 74 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/org/[id]/overview/index.tsx
+74 -50
View File
@@ -31,6 +31,7 @@ import {
Input, Input,
Modal, Modal,
ModalContent, ModalContent,
Skeleton,
UpgradePlanModal UpgradePlanModal
} from "@app/components/v2"; } from "@app/components/v2";
import { TabsObject } from "@app/components/v2/Tabs"; import { TabsObject } from "@app/components/v2/Tabs";
@@ -60,7 +61,7 @@ type ItemProps = {
link?: string; link?: string;
}; };
const learningItem = ({ const LearningItem = ({
text, text,
subText, subText,
complete, complete,
@@ -159,7 +160,7 @@ const learningItem = ({
); );
}; };
const learningItemSquare = ({ const LearningItemSquare = ({
text, text,
subText, subText,
complete, complete,
@@ -241,7 +242,7 @@ export default function Organization() {
const router = useRouter(); const router = useRouter();
const { workspaces } = useWorkspace(); const { workspaces, isLoading: isWorkspaceLoading } = useWorkspace();
const orgWorkspaces = const orgWorkspaces =
workspaces?.filter( workspaces?.filter(
(workspace) => workspace.organization === localStorage.getItem("orgData.id") (workspace) => workspace.organization === localStorage.getItem("orgData.id")
@@ -334,6 +335,8 @@ export default function Organization() {
}); });
}, []); }, []);
const isWorkspaceEmpty = !isWorkspaceLoading && orgWorkspaces?.length === 0;
return ( return (
<div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800 md:h-screen"> <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800 md:h-screen">
<Head> <Head>
@@ -366,6 +369,23 @@ export default function Organization() {
</Button> </Button>
</div> </div>
<div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> <div className="mt-4 grid w-full grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{isWorkspaceLoading &&
Array.apply(0, Array(3)).map((_x, i) => (
<div
key={`workspace-cards-loading-${i + 1}`}
className="min-w-72 flex h-40 flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4"
>
<div className="mt-0 text-lg text-mineshaft-100">
<Skeleton className="w-3/4 bg-mineshaft-600" />
</div>
<div className="mt-0 pb-6 text-sm text-mineshaft-300">
<Skeleton className="w-1/2 bg-mineshaft-600" />
</div>
<div className="flex justify-end">
<Skeleton className="w-1/2 bg-mineshaft-600" />
</div>
</div>
))}
{orgWorkspaces {orgWorkspaces
.filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase()))
.map((workspace) => ( .map((workspace) => (
@@ -395,7 +415,7 @@ export default function Organization() {
</div> </div>
))} ))}
</div> </div>
{orgWorkspaces.length === 0 && ( {isWorkspaceEmpty && (
<div className="w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300"> <div className="w-full rounded-md border border-mineshaft-700 bg-mineshaft-800 px-4 py-6 text-base text-mineshaft-300">
<FontAwesomeIcon <FontAwesomeIcon
icon={faFolderOpen} icon={faFolderOpen}
@@ -416,43 +436,46 @@ export default function Organization() {
<div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl"> <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
<p className="mr-4 mb-4 font-semibold text-white">Onboarding Guide</p> <p className="mr-4 mb-4 font-semibold text-white">Onboarding Guide</p>
<div className="mb-3 grid w-full grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> <div className="mb-3 grid w-full grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
{learningItemSquare({ <LearningItemSquare
text: "Watch Infisical demo", text="Watch Infisical demo"
subText: "Set up Infisical in 3 min.", subText="Set up Infisical in 3 min."
complete: hasUserClickedIntro, complete={hasUserClickedIntro}
icon: faHandPeace, icon={faHandPeace}
time: "3 min", time="3 min"
userAction: "intro_cta_clicked", userAction="intro_cta_clicked"
link: "https://www.youtube.com/watch?v=PK23097-25I" link="https://www.youtube.com/watch?v=PK23097-25I"
})} />
{orgWorkspaces.length !== 0 && {orgWorkspaces.length !== 0 && (
learningItemSquare({ <>
text: "Add your secrets", <LearningItemSquare
subText: "Drop a .env file or type your secrets.", text="Add your secrets"
complete: hasUserPushedSecrets, subText="Drop a .env file or type your secrets."
icon: faPlus, complete={hasUserPushedSecrets}
time: "1 min", icon={faPlus}
userAction: "first_time_secrets_pushed", time="1 min"
link: `/project/${orgWorkspaces[0]?._id}/secrets/overview` userAction="first_time_secrets_pushed"
})} link={`/project/${orgWorkspaces[0]?._id}/secrets/overview`}
{learningItemSquare({ />
text: "Invite your teammates", <LearningItemSquare
subText: "Infisical is better used as a team.", text="Invite your teammates"
complete: usersInOrg, subText="Infisical is better used as a team."
icon: faUserPlus, complete={usersInOrg}
time: "2 min", icon={faUserPlus}
link: `/org/${router.query.id}/members?action=invite` time="2 min"
})} link={`/org/${router.query.id}/members?action=invite`}
/>
</>
)}
<div className="block xl:hidden 2xl:block"> <div className="block xl:hidden 2xl:block">
{learningItemSquare({ <LearningItemSquare
text: "Join Infisical Slack", text="Join Infisical Slack"
subText: "Have any questions? Ask us!", subText="Have any questions? Ask us!"
complete: hasUserClickedSlack, complete={hasUserClickedSlack}
icon: faSlack, icon={faSlack}
time: "1 min", time="1 min"
userAction: "slack_cta_clicked", userAction="slack_cta_clicked"
link: "https://infisical.com/slack" link="https://infisical.com/slack"
})} />
</div> </div>
</div> </div>
{orgWorkspaces.length !== 0 && ( {orgWorkspaces.length !== 0 && (
@@ -485,18 +508,19 @@ export default function Organization() {
{false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />} {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
</div> </div>
)} )}
{orgWorkspaces.length !== 0 && {orgWorkspaces.length !== 0 && (
learningItem({ <LearningItem
text: "Integrate Infisical with your infrastructure", text="Integrate Infisical with your infrastructure"
subText: "Connect Infisical to various 3rd party services and platforms.", subText="Connect Infisical to various 3rd party services and platforms."
complete: false, complete={false}
icon: faPlug, icon={faPlug}
time: "15 min", time="15 min"
link: "https://infisical.com/docs/integrations/overview" link="https://infisical.com/docs/integrations/overview"
})} />
)}
</div> </div>
)} )}
<div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 pb-6 text-3xl"> <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-6 text-3xl">
<p className="mr-4 font-semibold text-white">Explore More</p> <p className="mr-4 font-semibold text-white">Explore More</p>
<div <div
className="mt-4 grid w-full grid-flow-dense gap-4" className="mt-4 grid w-full grid-flow-dense gap-4"