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/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