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>
  );
};

Tabs Date Format