Loaders
VitNode provides a few loaders to help you load any data to the frontend.
Loader
This loader looks like a spinner and it's used to show that something is loading.
import { Loader } from "@/components/loader";
export const TestComponent = () => {
if (isLoading) return <Loader />;
return <div>Test</div>;
};
This component accepts also a smaller version by passing the small
prop.
ℹ️
You can use <Loader />
component to show a loader in the middle of the page
when you're loading data.
Build-in Loaders
We're modifying few components to help you load data to the frontend. You can use the loading
prop to show a loader inside the component.
Button
import { Button } from "@/components/ui/button";
export const TestComponent = () => {
return (
<Button type="submit" loading={isPending}>
{t("save")}
</Button>
);
};
DropdownMenuItem
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
export const TestComponent = () => {
return (
<DropdownMenuItem loading={isPending}>{t("testing")}</DropdownMenuItem>
);
};