docs(Loaders): write documentation and guidelines (#2302)

resolves #1487

---------

Co-authored-by: Marianne Røsvik <marianne.rosvik@digdir.no>

Author: Barsnes

packages/react/src/components/Button/Button.stories.tsx

@@ -15,8 +15,7 @@ import {
 import type { Meta, ReactRenderer, StoryFn, StoryObj } from '@storybook/react';
 import type { PartialStoryFn } from '@storybook/types';
 
-import { Spinner } from '../Spinner';
-import { Tooltip } from '../Tooltip';
+import { Spinner, Tooltip } from '../';
 
 import { Button } from './';
 

packages/react/src/components/Button/Button.tsx

@@ -2,8 +2,7 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-import { Spinner } from '../Spinner';
-import { Paragraph } from '../Typography';
+import { Paragraph, Spinner } from '../';
 
 export type ButtonProps = {
   /**

packages/react/src/components/form/Combobox/Combobox.tsx

@@ -6,7 +6,7 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 
 import type { PortalProps } from '../../../types/Portal';
 import { omit, useDebounceCallback } from '../../../utilities';
-import { Spinner } from '../../Spinner';
+import { Spinner } from '../../loaders/Spinner';
 import type { FormFieldProps } from '../useFormField';
 import { useFormField } from '../useFormField';
 

packages/react/src/components/index.ts

@@ -3,7 +3,8 @@ export * from './Button';
 export * from './Badge';
 export * from './Breadcrumbs';
 export * from './HelpText';
-export * from './Spinner';
+export * from './loaders/Spinner';
+export * from './loaders/Skeleton';
 export * from './Link';
 export * from './List';
 export * from './Typography/';
@@ -28,7 +29,6 @@ export * from './Divider';
 export * from './Modal';
 export * from './DropdownMenu';
 export * from './form/Search';
-export * from './Skeleton';
 export * from './Card';
 export * from './form/Combobox';
 export * from './Table';

packages/react/src/components/loaders/Loaders.mdx

@@ -0,0 +1,47 @@
+import { Meta, Primary, Controls, Canvas } from '@storybook/blocks';
+
+import * as SkeletonStories from './Skeleton/Skeleton.stories';
+import * as SpinnerStories from './Spinner/Spinner.stories';
+
+<Meta title="Komponenter/Loaders" />
+
+# Loaders
+
+`Loaders` viser brukeren at systemet jobber.
+Vi bruker dem når handlinger eller prosesser tar lenger tid, og brukeren må vente i mer enn 1 sekund.
+
+I Designsystemet har vi to typer `Loaders`: `Spinner` og `Skeleton`. Disse har ulike bruksområder og skal brukes i henhold til lastingen som foregår.
+
+<br/>
+
+
+
+## Spinner
+
+`Spinner` brukes når vi venter på at en handling skal fullføres. Dette kan være når vi venter på at et skjema skal sendes inn.
+
+<Canvas of={SpinnerStories.Preview} />
+
+## Skeleton
+
+`Skeleton` brukes når vi venter på at store deler av en side skal lastes inn. Den skal vise brukeren at det er innhold som kommer, og hvordan det vil se ut.
+
+Det er ulike varianter av `Skeleton` som kan brukes avhengig av hva som lastes inn.
+Du skal prøve å gjenskape innholdet som vil bli lastet inn.
+
+<Canvas of={SkeletonStories.UsageExample} />
+
+## Retningslinjer for `Loaders`
+
+<br />
+
+**Passer til å**
+- laste innhold på siden
+- fortelle brukeren at en handling midlertidig har stoppet applikasjonen
+- fortelle brukeren når lasting vil ta mer enn 1 sekund
+- fortelle brukeren at data blir lagret eller oppdatert
+
+<br />
+
+**Passer ikke**
+- når en lasting tar mindre enn 1 sekund

packages/react/src/components/Skeleton/Circle/Circle.test.tsx packages/react/src/components/loaders/Skeleton/Circle/Circle.test.tsx

@@ -1,7 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 
-import { useSynchronizedAnimation } from '../../../utilities';
+import { useSynchronizedAnimation } from '../../../../utilities';
 
 export type CircleProps = {
   /** The width of the component */

packages/react/src/components/Skeleton/Circle/Circle.tsx packages/react/src/components/loaders/Skeleton/Circle/Circle.tsx

@@ -1,7 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 
-import { useSynchronizedAnimation } from '../../../utilities';
+import { useSynchronizedAnimation } from '../../../../utilities';
 
 export type RectangleProps = {
   /** The width of the component */

packages/react/src/components/Skeleton/Rectangle/Rectangle.test.tsx packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.test.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import { Button } from '../Button';
-import { Heading, Paragraph } from '../Typography';
+import { Button, Heading, Paragraph } from '../../';
 
 import { Skeleton } from '.';
 

packages/react/src/components/Skeleton/Rectangle/Rectangle.tsx packages/react/src/components/loaders/Skeleton/Rectangle/Rectangle.tsx

@@ -1,7 +1,7 @@
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 
-import { useSynchronizedAnimation } from '../../../utilities';
+import { useSynchronizedAnimation } from '../../../../utilities';
 
 export type TextProps = {
   /** The width of the component */

packages/react/src/components/Skeleton/Skeleton.mdx packages/react/src/components/loaders/Skeleton/Skeleton.mdx

@@ -6,16 +6,23 @@ import * as SpinnerStories from './Spinner.stories';
 
 # Spinner
 
+`Spinner` brukes for å indikere at en handling pågår. Dette kan være når vi venter på at et skjema skal sendes inn.
+
 <Primary />
 <Controls />
 
-Når brukeren har `prefers-reduced-motion` satt til `reduce` vil spinneren ha en animasjon på 6 sekunder.
-Animasjonen er ikke dekorativ, og vi skrur den derfor ikke av.
-
 ## Størrelser
 
+Du kan justere størrelsen på `Spinner` etter hvor den skal plasseres. 
+Størrelsen vil være mindre i knapper, men større dersom den er ved et skjemafelt.
+
 <Canvas of={SpinnerStories.Sizes} />
 
 ## Varianter
 
 <Canvas of={SpinnerStories.Variants} />
+
+## Tilgjengelighet
+
+Når brukeren har `prefers-reduced-motion` satt til `reduce` vil spinneren ha en animasjon på 6 sekunder.
+Animasjonen er ikke dekorativ, og vi skrur den derfor ikke av.

packages/react/src/components/Skeleton/Skeleton.stories.tsx packages/react/src/components/loaders/Skeleton/Skeleton.stories.tsx

@@ -1,7 +1,7 @@
 import cl from 'clsx/lite';
 import type * as React from 'react';
 
-import { useSynchronizedAnimation } from '../../utilities';
+import { useSynchronizedAnimation } from '../../../utilities';
 
 export type SpinnerProps = {
   /** Spinner title  */