# Function CoveringLoader

A loader that wraps an element and covers it with a loading spinner, decreasing visibility of the content and blocking interactions. It requires a single child element, whose ref will provide a DOM element.

It has 3 modes of operation:

- before - will add the loader as ::before element of the ref node
- after - will add the loader as ::after element of the ref node
- cover (default) - will add itself to the parent of the ref node, setting position: relative to it

Before/after modes will cover the background with semi-transparent white. Over mode will decrease the opacity of the wrapped element.

- CoveringLoader(
  props: LoaderProps & {
  children: ReactElement;
  inertMode?: "block-interaction" | "cover-element" | "pass-through";
  mode?: "over" | "before" | "after";
  } & RefAttributes<HTMLElement>,
  ): ReactNode

- #### Parameters

  - props: LoaderProps & {
    children: ReactElement;
    inertMode?: "block-interaction" | "cover-element" | "pass-through";
    mode?: "over" | "before" | "after";
    } & RefAttributes<HTMLElement>

  #### Returns ReactNode

  - Defined in src/components/ui/loader/CoveringLoader.tsx:35

#####
Index

### Properties

$$typeof
defaultProps?
displayName?
propTypes?

##
Properties

### `Readonly`$$typeof

$$typeof: symbol

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:644

### `Optional` defaultProps

defaultProps?: Partial<
LoaderProps & {
children: ReactElement;
inertMode?: "block-interaction"
| "cover-element"
| "pass-through";
mode?: "over" | "before" | "after";
} & RefAttributes<HTMLElement>,
>

#### Deprecated

Use values for destructuring assignments instead.

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1582

### `Optional` displayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

#### See

Legacy React Docs

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:660

### `Optional` propTypes

propTypes?: WeakValidationMap<
LoaderProps & {
children: ReactElement;
inertMode?: "block-interaction"
| "cover-element"
| "pass-through";
mode?: "over" | "before" | "after";
} & RefAttributes<HTMLElement>,
>

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1583