feat(platform): Add loading skeleton in the secrets page

[PriyobrotoKar]

User description

Description

Implemented the shadcn/ui skeleton to render a loader while fetching secrets from the server in the secrets page.

Fixes #322

Dependencies

shadcn/ui-Skeleton

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

Screenshots of relevant screens

Screen.Recording.2024-09-12.at.11.32.44.PM.mov

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

enhancement

---

Description

• Introduced a loading skeleton on the secrets page to improve user experience while data is being fetched.
• Created a new Skeleton component for consistent loading animations across the application.
• Managed loading state using a boolean isLoading and displayed skeleton loaders conditionally.
• Enhanced the UI by providing visual feedback during data fetching operations.

---

Changes walkthrough 📝

Relevant files

Enhancement

page.tsx Implement loading skeleton for secrets page                            apps/platform/src/app/(main)/project/[project]/@secret/page.tsx Added a loading state with isLoading variable. Implemented SerectLoader component to display skeleton loaders. Integrated Skeleton component for loading visuals. Managed loading state with useEffect and finally block. +34/-0    skeleton.tsx Add reusable Skeleton component for loading states              apps/platform/src/components/ui/skeleton.tsx Created Skeleton component for loading animations. Utilized animate-pulse for visual effect. Allowed custom class names via props. +18/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Error Handling The error handling in the useEffect hook only logs the error to the console. Consider implementing a more robust error handling mechanism, such as displaying an error message to the user. Code Duplication The SerectLoader component is rendered three times with identical props. Consider using a loop or mapping function to reduce code duplication.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Extract loading state logic into a custom hook for better organization Consider extracting the loading state logic into a custom hook, such as useSecrets, to improve code organization and reusability. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [36-53] -const [allSecrets, setAllSecrets] = useState<Secret[]>() -const [isLoading, setIsLoading] = useState<boolean>(true) -const pathname = usePathname() +const { allSecrets, isLoading } = useSecrets(pathname.split('/')[2]) -useEffect(() => { - setIsLoading(true) - Secrets.getAllSecretbyProjectId(pathname.split('/')[2]) - .then((data) => { - setAllSecrets(data) - }) - .catch((error) => { - // eslint-disable-next-line no-console -- we need to log the error - console.error(error) - }) - .finally(() => { - setIsLoading(false) - }) -}, [pathname]) +// ... rest of the component code +// In a separate file or at the top of the current file: +function useSecrets(projectId: string) { + const [allSecrets, setAllSecrets] = useState<Secret[]>() + const [isLoading, setIsLoading] = useState<boolean>(true) + + useEffect(() => { + setIsLoading(true) + Secrets.getAllSecretbyProjectId(projectId) + .then((data) => { + setAllSecrets(data) + }) + .catch((error) => { + console.error(error) + }) + .finally(() => { + setIsLoading(false) + }) + }, [projectId]) + + return { allSecrets, isLoading } +} + Apply this suggestion Suggestion importance[1-10]: 8 Why: Extracting the loading logic into a custom hook enhances code organization and reusability, making it easier to manage and test the loading state logic separately.	8
	Add a size prop to the Skeleton component for easier customization Consider adding a size prop to the Skeleton component to allow for easy customization of width and height, reducing the need for custom class names for common use cases. apps/platform/src/components/ui/skeleton.tsx [3-16] +interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> { + size?: 'sm' | 'md' | 'lg'; +} + function Skeleton({ className, + size = 'md', ...props -}: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element { +}: SkeletonProps): React.JSX.Element { + const sizeClasses = { + sm: 'h-4 w-16', + md: 'h-6 w-24', + lg: 'h-8 w-32', + }; + return ( <div className={cn( 'animate-pulse rounded-md bg-white/20 dark:bg-zinc-800', + sizeClasses[size], className )} {...props} /> ) } Suggestion importance[1-10]: 7 Why: Adding a size prop enhances the flexibility and usability of the Skeleton component, allowing for easier customization and reducing the need for repetitive custom class names.	7
Maintainability	Rename the loading component to better reflect its purpose Consider using a more descriptive name for the SerectLoader component, such as SecretSkeletonLoader or SecretLoadingPlaceholder, to better reflect its purpose and avoid potential confusion with the word "Secret". apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [139-155] -function SerectLoader(): React.JSX.Element { +function SecretSkeletonLoader(): React.JSX.Element { return ( <div className=" rounded-xl bg-white/5 p-4"> <div className="flex justify-between"> <div className="flex items-center gap-x-6"> <Skeleton className=" h-6 w-32 rounded" /> <Skeleton className=" size-6 rounded" /> </div> <div className="flex items-center gap-x-3"> <Skeleton className=" h-6 w-24 rounded" /> <Skeleton className=" h-6 w-16 rounded" /> <Skeleton className=" ml-5 size-4 rounded" /> </div> </div> </div> ) } Apply this suggestion Suggestion importance[1-10]: 7 Why: The suggestion improves code readability and maintainability by using a more descriptive name, which helps avoid confusion and better conveys the component's purpose.	7
	Use a constant for the number of skeleton loaders to improve flexibility Consider using a constant for the number of skeleton loaders to render, making it easier to adjust the number of placeholders in the future. apps/platform/src/app/(main)/project/[project]/@secret/page.tsx [55-63] +const SKELETON_COUNT = 3; + if (isLoading) { return ( <div className="space-y-4"> - <SerectLoader /> - <SerectLoader /> - <SerectLoader /> + {Array.from({ length: SKELETON_COUNT }).map((_, index) => ( + <SerectLoader key={index} /> + ))} </div> ) } Apply this suggestion Suggestion importance[1-10]: 6 Why: Using a constant for the number of skeleton loaders improves maintainability by making it easier to adjust the number of loaders without modifying multiple lines of code.	6

[kriptonian1]

LGTM 🚀

[kriptonian1]

@rajdip-b you can merge this PR

[rajdip-b]

🎉 This PR is included in version 2.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀