From b2ff020edf49eec97249cd1ee30012685063e52f Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date: Thu, 28 Oct 2021 11:38:45 +0200
Subject: [PATCH] feat(ui): Added loader inside ui-lib. (TV-859)

Squashed commit of the following:

commit 21101f1de202e87c27ae7832669e484d163e66b4
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Oct 28 11:01:09 2021 +0200

    Updated imports

commit 0d8bee6ac8967f5ddb480eff429e91db812b0f16
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Oct 28 10:42:35 2021 +0200

    Now using loader from inside libs
---
 .../employee-invite.component.html            |  2 +-
 .../employee-invite/employee-invite.module.ts |  4 +-
 .../employees-list.component.html             |  2 +-
 .../employees-list/employees-list.module.ts   |  4 +-
 .../src/app/pages/avrop/avrop.component.html  | 14 +++++--
 .../src/app/pages/avrop/avrop.module.ts       |  6 +--
 .../avrop-filters.component.html              |  2 +-
 .../avrop-filters.component.spec.ts           |  2 +-
 .../avrop-filters/avrop-filters.module.ts     |  4 +-
 .../avrop-list/avrop-list.component.html      |  2 +-
 .../avrop-list/avrop-list.module.ts           |  6 +--
 ...re-tab-personal-information.component.html |  2 +-
 .../deltagare-tab-reports.component.html      |  2 +-
 .../deltagare-tab-reports.component.spec.ts   |  4 +-
 .../deltagare-card.component.html             |  2 +-
 .../deltagare-card/deltagare-card.module.ts   |  6 +--
 .../avvikelse-report-form.component.html      |  9 ++---
 .../avvikelse-report-form.module.ts           |  6 +--
 .../franvaro-report-form.component.html       |  9 ++---
 .../franvaro-report-form.module.ts            |  6 +--
 .../gemensam-planering-form.component.html    |  9 ++---
 .../gemensam-planering-form.module.ts         |  6 +--
 .../informativ-rapport-form.component.html    |  9 ++---
 .../periodisk-redovisning-form.component.html |  9 ++---
 .../periodisk-redovisning-form.module.ts      |  6 +--
 .../signal-form/signal-form.component.html    |  7 +---
 .../avvikelse-report-view.component.html      |  2 +-
 .../avvikelse-report-view.module.ts           |  6 +--
 .../franvaro-report-view.component.html       |  2 +-
 .../franvaro-report-view.module.ts            |  6 +--
 .../gemensam-planering-view.component.html    |  2 +-
 .../gemensam-planering-view.module.ts         |  8 ++--
 .../periodisk-redovisning-view.component.html |  2 +-
 .../periodisk-redovisning-view.module.ts      |  6 +--
 .../deltagare-list-table.component.html       |  2 +-
 .../deltagare-list-table.module.ts            |  4 +-
 .../organization-picker.component.html        |  2 +-
 .../organization-picker.module.ts             |  4 +-
 .../src/app/pages/start/start.component.html  |  2 +-
 .../src/app/pages/start/start.module.ts       |  4 +-
 .../handledare-picker-form.component.html     |  2 +-
 .../handledare-picker-form.module.ts          |  4 +-
 .../components/layout/layout.component.html   |  2 +-
 .../shared/components/layout/layout.module.ts |  4 +-
 .../components/loader/loader.component.html   |  3 --
 .../components/loader/loader.component.scss   | 40 -------------------
 .../loader/loader.component.spec.ts           | 26 ------------
 .../components/loader/loader.component.ts     | 25 ------------
 .../shared/components/loader/loader.module.ts | 11 -----
 .../src/app/shared/enums/loader-type.enum.ts  |  6 ---
 libs/ui/loader/loader.component.html          |  2 +-
 libs/ui/loader/loader.component.scss          |  6 +++
 libs/ui/loader/loader.component.ts            |  2 +
 53 files changed, 106 insertions(+), 219 deletions(-)
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts
 delete mode 100644 apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts

diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
index 80738b9..e1e6f44 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.component.html
@@ -84,4 +84,4 @@
     </section>
   </digi-typography>
 </msfa-layout>
-<msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
+<ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts
index 2aa5189..fa4d38a 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-invite/employee-invite.module.ts
@@ -5,7 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { EmployeeInviteComponent } from './employee-invite.component';
 
 @NgModule({
@@ -18,7 +18,7 @@ import { EmployeeInviteComponent } from './employee-invite.component';
     BackLinkModule,
     ReactiveFormsModule,
     DigiNgFormTextareaModule,
-    LoaderModule
+    UiLoaderModule,
   ],
 })
 export class EmployeeInviteModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
index c72c42e..af36def 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html
@@ -1,5 +1,5 @@
 <div class="employees-list">
-  <msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
+  <ui-loader *ngIf="employeesLoading" uiType="absolute"></ui-loader>
   <digi-table af-variation="secondary">
     <span class="msfa__a11y-sr-only" aria-live="polite">
       Totalt {{count}} träffar på personal med max 10 rader på varje sida
diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts
index ebe1bc9..06cc89b 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { EmployeesListComponent } from './employees-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [EmployeesListComponent],
-  imports: [CommonModule, RouterModule, LoaderModule],
+  imports: [CommonModule, RouterModule, UiLoaderModule],
   exports: [EmployeesListComponent],
 })
 export class EmployeesListModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html
index c5b41ce..631c0a3 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.html
@@ -103,13 +103,21 @@
                   <digi-button af-size="m" (afOnClick)="lockSelectedAvrop()">Nästa</digi-button>
                 </ng-container>
                 <ng-container *ngSwitchCase="2">
-                  <digi-button [attr.af-aria-label]="'Tillbaka till välj deltagare att tilldela'" af-variation="secondary" af-size="m" (afOnClick)="unlockSelectedAvrop()"
+                  <digi-button
+                    [attr.af-aria-label]="'Tillbaka till välj deltagare att tilldela'"
+                    af-variation="secondary"
+                    af-size="m"
+                    (afOnClick)="unlockSelectedAvrop()"
                     >Tillbaka
                   </digi-button>
                   <digi-button af-size="m" (afOnClick)="confirmHandledare()">Nästa</digi-button>
                 </ng-container>
                 <ng-container *ngSwitchCase="3">
-                  <digi-button [attr.af-aria-label]="'Tillbaka till tilldela handledare'" af-variation="secondary" af-size="m" (afOnClick)="unconfirmHandledare()"
+                  <digi-button
+                    [attr.af-aria-label]="'Tillbaka till tilldela handledare'"
+                    af-variation="secondary"
+                    af-size="m"
+                    (afOnClick)="unconfirmHandledare()"
                     >Tillbaka
                   </digi-button>
                   <digi-button af-size="m" (afOnClick)="save()">Bekräfta tilldelning</digi-button>
@@ -127,7 +135,7 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader></msfa-loader>
+  <ui-loader></ui-loader>
 </ng-template>
 
 <ng-template #skeletonRef>
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts
index a0fcf63..cf9420c 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.module.ts
@@ -1,12 +1,12 @@
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { UnauthorizedAlertModule } from '@msfa-shared/components/unauthorized-alert/unauthorized-alert.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { AvropComponent } from './avrop.component';
 import { AvropFiltersModule } from './components/avrop-filters/avrop-filters.module';
 import { AvropListModule } from './components/avrop-list/avrop-list.module';
@@ -22,7 +22,7 @@ import { AvropListModule } from './components/avrop-list/avrop-list.module';
     AvropFiltersModule,
     DigiNgProgressProgressbarModule,
     UiSkeletonModule,
-    LoaderModule,
+    UiLoaderModule,
     HandledarePickerFormModule,
     UnauthorizedAlertModule,
   ],
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html
index 1aee0bf..271e76e 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.html
@@ -49,5 +49,5 @@
   </div>
 </div>
 <ng-template #loadingRef>
-  <msfa-loader></msfa-loader>
+  <ui-loader></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts
index 0dd71a4..b84e182 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.component.spec.ts
@@ -49,7 +49,7 @@ describe('AvropFiltersComponent', () => {
 
   it('should show loading spinner when filters are loading', () => {
     fixture.detectChanges();
-    const tags = fixture.debugElement.queryAll(By.css('msfa-loader'));
+    const tags = fixture.debugElement.queryAll(By.css('ui-loader'));
     expect(tags.length).toBe(1);
   });
 });
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts
index cb4439b..6971d5d 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-filters/avrop-filters.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { MultiselectModule } from '@msfa-shared/components/multiselect/multiselect.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { AvropFiltersComponent } from './avrop-filters.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AvropFiltersComponent],
-  imports: [CommonModule, MultiselectModule, LoaderModule],
+  imports: [CommonModule, MultiselectModule, UiLoaderModule],
   exports: [AvropFiltersComponent],
 })
 export class AvropFiltersModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html
index bb73b84..ffb82c3 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.component.html
@@ -1,5 +1,5 @@
 <div class="avrop-list">
-  <msfa-loader *ngIf="avropLoading" type="absolute"></msfa-loader>
+  <ui-loader *ngIf="avropLoading" uiType="absolute"></ui-loader>
   <ul class="avrop-list__list">
     <li *ngFor="let avrop of avropRows">
       <msfa-avrop-row
diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts
index 2b37cde..68379c1 100644
--- a/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/avrop/components/avrop-list/avrop-list.module.ts
@@ -1,14 +1,14 @@
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { AvropRowModule } from '../avrop-row/avrop-row.module';
 import { AvropListComponent } from './avrop-list.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [AvropListComponent],
-  imports: [CommonModule, AvropRowModule, LoaderModule, UiSkeletonModule],
+  imports: [CommonModule, AvropRowModule, UiLoaderModule, UiSkeletonModule],
   exports: [AvropListComponent],
 })
 export class AvropListModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
index e1df3b3..1cabb15 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-personal-information/deltagare-tab-personal-information.component.html
@@ -95,5 +95,5 @@
   <dd>Info saknas</dd>
 </ng-template>
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html
index 03f4f26..f48149b 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.html
@@ -62,5 +62,5 @@
   <p>Inga rapporter finns registrerad.</p>
 </ng-template>
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.spec.ts
index 53ddef2..f583cb5 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.spec.ts
@@ -4,7 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { DeltagareCardService } from '../../deltagare-card.service';
 import { DeltagareTabReportsComponent } from './deltagare-tab-reports.component';
 
@@ -19,7 +19,7 @@ describe('DeltagareTabReportsComponent', () => {
         RouterTestingModule,
         HttpClientTestingModule,
         ReactiveFormsModule,
-        LoaderModule,
+        UiLoaderModule,
         DigiNgFormSelectModule,
       ],
       providers: [DeltagareCardService],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
index bb933de..a51edb2 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.component.html
@@ -87,5 +87,5 @@
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
index f79c64b..36f9577 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/deltagare-card.module.ts
@@ -2,7 +2,6 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
 import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -11,7 +10,8 @@ import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.modu
 import { HandledarePickerFormModule } from '@msfa-shared/components/handledare-picker-form/handledare-picker-form.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { DeltagareTabExperiencesComponent } from './components/deltagare-tab-experiences/deltagare-tab-experiences.component';
 import { DeltagareTabPersonalInformationComponent } from './components/deltagare-tab-personal-information/deltagare-tab-personal-information.component';
 import { ReportsListModule } from './components/deltagare-tab-reports/components/reports-list/reports-list.module';
@@ -37,7 +37,7 @@ import { DeltagareCardService } from './deltagare-card.service';
     LayoutModule,
     BackLinkModule,
     HideTextModule,
-    LoaderModule,
+    UiLoaderModule,
     HandledarePickerFormModule,
     DigiNgLayoutExpansionPanelModule,
     DigiNgPopoverModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
index a7b8ca7..e986221 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.component.html
@@ -105,7 +105,7 @@
             afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (avvikelse)"
             id="confirmAvvikelserapport"
           >
-            <msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <dt>Orsak till avvikelse:</dt>
               <dd>{{(chosenReason$ | async)?.name }}</dd>
@@ -133,11 +133,8 @@
   </msfa-report-layout>
 </msfa-layout>
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Avvikelserapport (avvikelse)"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Avvikelserapport (avvikelse)"></ui-skeleton>
 </ng-template>
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
index 1513f17..dec5704 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/avvikelse-report-form/avvikelse-report-form.module.ts
@@ -5,7 +5,6 @@ import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobu
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgFormTextareaModule } from '@af/digi-ng/_form/form-textarea';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -13,7 +12,8 @@ import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { AvvikelseReportFormComponent } from './avvikelse-report-form.component';
@@ -36,7 +36,7 @@ import { AvvikelseReportFormService } from './avvikelse-report-form.service';
     BackLinkModule,
     UiSkeletonModule,
     DigiNgFormSelectModule,
-    LoaderModule,
+    UiLoaderModule,
     ReportDescriptionListModule,
     DigiNgFormInputModule,
     DigiNgDialogModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
index 3383616..ae8f211 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.component.html
@@ -270,7 +270,7 @@
             afAriaLabel="Förhandsgranska och skicka in Avvikelserapport (frånvaro)"
             id="confirm-franvaro-report"
           >
-            <msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <ng-container *ngIf="reasons$ | async as reasons">
                 <dt>Orsak till frånvaro</dt>
@@ -316,12 +316,9 @@
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Avvikelserapport (frånvaro)"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Avvikelserapport (frånvaro)"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
index 6d6a592..ce746fb 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/franvaro-report-form/franvaro-report-form.module.ts
@@ -5,14 +5,14 @@ import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobu
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgFormTextareaModule } from '@af/digi-ng/_form/form-textarea';
 import { DigiNgFormValidationMessageModule } from '@af/digi-ng/_form/form-validation-message';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { FranvaroReportFormComponent } from './franvaro-report-form.component';
@@ -27,7 +27,7 @@ import { FranvaroReportFormService } from './franvaro-report-form.service';
     ReactiveFormsModule,
     LayoutModule,
     ReportLayoutModule,
-    LoaderModule,
+    UiLoaderModule,
     BackLinkModule,
     ReportDescriptionListModule,
     DigiNgFormSelectModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
index 265faa2..6c64a93 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.component.html
@@ -99,7 +99,7 @@
             afAriaLabel="Förhandsgranska och skicka in Gemensam planering"
             id="confirm-gemensam-planering-form"
           >
-            <msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <dt>Deltar arbetssökande på distans?</dt>
               <dd>{{gpFormGroup.value.distance ? 'Ja' : 'Nej'}}</dd>
@@ -136,12 +136,9 @@
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Gemensam planering"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Gemensam planering"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
index f96df8d..5e6f702 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/gemensam-planering-form/gemensam-planering-form.module.ts
@@ -2,14 +2,14 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { GemensamPlaneringFormComponent } from './gemensam-planering-form.component';
@@ -27,7 +27,7 @@ import { GemensamPlaneringFormService } from './gemensam-planering-form.service'
     ReactiveFormsModule,
     ReportLayoutModule,
     BackLinkModule,
-    LoaderModule,
+    UiLoaderModule,
     ReportDescriptionListModule,
     UiSkeletonModule,
     DigiNgFormCheckboxModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
index a7411af..49827e0 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/informativ-rapport-form/informativ-rapport-form.component.html
@@ -96,7 +96,7 @@
             afAriaLabel="Förhandsgranska och skicka in Informativ rapport"
             id="confirm-informativ-rapport"
           >
-            <msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
                 <dt>Vad gäller ärendet</dt>
@@ -152,12 +152,9 @@
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Informativ rapport"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Informativ rapport"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
index 57cd9ed..63fdc7d 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.component.html
@@ -189,7 +189,7 @@
             afAriaLabel="Förhandsgranska och skicka in Periodisk redovisning"
             id="confirm-periodisk-redovisning-form"
           >
-            <msfa-loader *ngIf="submitIsLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <ng-container *ngIf="submitData$ | async; let submitData; else loadingRef">
                 <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren:</dt>
@@ -280,12 +280,9 @@
 </ng-template>
 
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Periodisk redovisning"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Periodisk redovisning"></ui-skeleton>
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
index c978673..eb78bb7 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module.ts
@@ -2,14 +2,14 @@ import { DigiNgDialogModule } from '@af/digi-ng/_dialog/dialog';
 import { DigiNgFormCheckboxModule } from '@af/digi-ng/_form/form-checkbox';
 import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
 import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportDescriptionListModule } from '../../../components/report-description-list/report-description-list.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { PeriodiskRedovisningFormComponent } from './periodisk-redovisning-form.component';
@@ -26,7 +26,7 @@ import { PeriodiskRedovisningFormService } from './periodisk-redovisning-form.se
     ReportLayoutModule,
     ReportDescriptionListModule,
     BackLinkModule,
-    LoaderModule,
+    UiLoaderModule,
     UiSkeletonModule,
     DigiNgDialogModule,
     DigiNgFormSelectModule,
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
index d1db9da..1228aa9 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/signal-form/signal-form.component.html
@@ -122,7 +122,7 @@
             afAriaLabel="Förhandsgranska och skicka in Signal om arbete eller studier"
             id="confirm-signal"
           >
-            <msfa-loader *ngIf="submitLoading$ | async" type="absolute"></msfa-loader>
+            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
             <msfa-report-description-list [avrop]="avrop">
               <dt>Typ av sysselsättning</dt>
               <dd>{{typeFormControl.value}}</dd>
@@ -152,8 +152,5 @@
 </msfa-layout>
 
 <ng-template #skeletonRef>
-  <ui-skeleton
-    [uiCount]="3"
-    uiText="Laddar data för att kunna skapa Signal om arbete eller studier"
-  ></ui-skeleton>
+  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Signal om arbete eller studier"></ui-skeleton>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.html
index e9c9433..df8097c 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.html
@@ -27,5 +27,5 @@
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.module.ts
index 6a55703..5564cb8 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.module.ts
@@ -1,10 +1,10 @@
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { AvvikelseReportViewComponent } from './avvikelse-report-view.component';
 import { AvvikelseReportViewService } from './avvikelse-report-view.service';
@@ -18,7 +18,7 @@ import { AvvikelseReportViewService } from './avvikelse-report-view.service';
     LayoutModule,
     ReportLayoutModule,
     BackLinkModule,
-    LoaderModule,
+    UiLoaderModule,
     UiSkeletonModule,
   ],
   providers: [AvvikelseReportViewService],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.html
index e62403f..df2d066 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.html
@@ -43,5 +43,5 @@
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.module.ts
index 2dd98b9..c03c8af 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.module.ts
@@ -1,10 +1,10 @@
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { FranvaroReportViewComponent } from './franvaro-report-view.component';
 import { FranvaroReportViewService } from './franvaro-report-view.service';
@@ -18,7 +18,7 @@ import { FranvaroReportViewService } from './franvaro-report-view.service';
     LayoutModule,
     ReportLayoutModule,
     BackLinkModule,
-    LoaderModule,
+    UiLoaderModule,
     UiSkeletonModule,
   ],
   providers: [FranvaroReportViewService],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.html
index e058965..b78e11a 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.html
@@ -33,5 +33,5 @@
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.module.ts
index 33fac41..328f067 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.module.ts
@@ -1,10 +1,10 @@
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { GemensamPlaneringViewComponent } from './gemensam-planering-view.component';
 import { GemensamPlaneringViewService } from './gemensam-planering-view.service';
@@ -18,8 +18,8 @@ import { GemensamPlaneringViewService } from './gemensam-planering-view.service'
     LayoutModule,
     ReportLayoutModule,
     BackLinkModule,
-    LoaderModule,
-    UiSkeletonModule
+    UiLoaderModule,
+    UiSkeletonModule,
   ],
   providers: [GemensamPlaneringViewService],
   exports: [GemensamPlaneringViewComponent],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html
index ac5b85e..2b61e06 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html
@@ -38,5 +38,5 @@
 </ng-template>
 
 <ng-template #loadingRef>
-  <msfa-loader type="padded"></msfa-loader>
+  <ui-loader uiType="padded"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts
index b3163a2..1b013d1 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts
@@ -1,11 +1,11 @@
-import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
 import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
 import { PeriodiskRedovisningViewComponent } from './periodisk-redovisning-view.component';
 import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
@@ -19,7 +19,7 @@ import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.se
     LayoutModule,
     ReportLayoutModule,
     BackLinkModule,
-    LoaderModule,
+    UiLoaderModule,
     HideTextModule,
     UiSkeletonModule,
   ],
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
index 4cd04df..7561bc4 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.component.html
@@ -1,5 +1,5 @@
 <div class="deltagare-list">
-  <msfa-loader *ngIf="deltagareLoading" type="absolute"></msfa-loader>
+  <ui-loader *ngIf="deltagareLoading" uiType="absolute"></ui-loader>
   <digi-table af-variation="secondary">
     <span class="msfa__a11y-sr-only" aria-live="polite">
       Totalt {{count}} träffar på deltagare med max 10 rader på varje sida
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
index e31d95e..eb9007f 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-list/components/deltagare-list-table/deltagare-list-table.module.ts
@@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { DeltagareListHandelserDialogComponent } from '../deltagare-list-handelser-dialog/deltagare-list-handelser-dialog.component';
 import { DeltagareListTableComponent } from './deltagare-list-table.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [DeltagareListTableComponent, DeltagareListHandelserDialogComponent],
-  imports: [CommonModule, RouterModule, IconModule, LoaderModule, DigiNgDialogModule],
+  imports: [CommonModule, RouterModule, IconModule, UiLoaderModule, DigiNgDialogModule],
   exports: [DeltagareListTableComponent],
 })
 export class DeltagareListTableModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.html b/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.html
index 553417e..f47fb28 100644
--- a/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.component.html
@@ -16,5 +16,5 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader type="full-blank-screen"></msfa-loader>
+  <ui-loader uiType="full-blank-screen"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.module.ts b/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.module.ts
index dc827d2..eb33209 100644
--- a/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/organization-picker/organization-picker.module.ts
@@ -1,14 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
 import { OrganizationPickerFormModule } from '@msfa-shared/components/organization-picker-form/organization-picker-form.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { OrganizationPickerRoutingModule } from './organization-picker-routing.module';
 import { OrganizationPickerComponent } from './organization-picker.component';
 
 @NgModule({
   declarations: [OrganizationPickerComponent],
-  imports: [CommonModule, LayoutModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule, LoaderModule],
+  imports: [CommonModule, LayoutModule, OrganizationPickerRoutingModule, OrganizationPickerFormModule, UiLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class OrganizationPickerModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.component.html b/apps/mina-sidor-fa/src/app/pages/start/start.component.html
index a38cfa2..af66658 100644
--- a/apps/mina-sidor-fa/src/app/pages/start/start.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/start/start.component.html
@@ -39,5 +39,5 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader type="full-screen"></msfa-loader>
+  <ui-loader uiType="full-screen"></ui-loader>
 </ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/start/start.module.ts b/apps/mina-sidor-fa/src/app/pages/start/start.module.ts
index e3e79dc..81a2bbe 100644
--- a/apps/mina-sidor-fa/src/app/pages/start/start.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/start/start.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
-import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { StartComponent } from './start.component';
 
 @NgModule({
@@ -14,7 +14,7 @@ import { StartComponent } from './start.component';
     RouterModule.forChild([{ path: '', component: StartComponent }]),
     LayoutModule,
     DigiNgCardModule,
-    LoaderModule,
+    UiLoaderModule,
   ],
 })
 export class StartModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
index 98a4129..38947c1 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.component.html
@@ -31,5 +31,5 @@
       Vald handledare har uppdaterats
     </digi-form-validation-message>
   </div>
-  <msfa-loader *ngIf="submitHandledareLoading$ | async" size="s" type="absolute"></msfa-loader>
+  <ui-loader *ngIf="submitHandledareLoading$ | async" uiSize="s" uiType="absolute"></ui-loader>
 </form>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
index 742ea47..d1d6843 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/handledare-picker-form/handledare-picker-form.module.ts
@@ -2,13 +2,13 @@ import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { LoaderModule } from '../loader/loader.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { HandledarePickerFormComponent } from './handledare-picker-form.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [HandledarePickerFormComponent],
-  imports: [CommonModule, ReactiveFormsModule, LoaderModule, DigiNgFormSelectModule],
+  imports: [CommonModule, ReactiveFormsModule, UiLoaderModule, DigiNgFormSelectModule],
   exports: [HandledarePickerFormComponent],
 })
 export class HandledarePickerFormModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
index b2bf10b..31c9903 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.component.html
@@ -19,4 +19,4 @@
   <msfa-footer class="msfa__footer"></msfa-footer>
 </div>
 
-<msfa-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" type="full-screen"></msfa-loader>
+<ui-loader *ngIf="(userLoading$ | async) || (rolesLoading$ | async)" uiType="full-screen"></ui-loader>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
index 6dbf25b..d16bb8e 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
+++ b/apps/mina-sidor-fa/src/app/shared/components/layout/layout.module.ts
@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { UiLoaderModule } from '@ui/loader/loader.module';
 import { MarkdownModule } from 'ngx-markdown';
-import { LoaderModule } from '../loader/loader.module';
 import { FooterModule } from './components/footer/footer.module';
 import { NavigationModule } from './components/navigation/navigation.module';
 import { SidebarModule } from './components/sidebar/sidebar.module';
@@ -23,7 +23,7 @@ import { LayoutComponent } from './layout.component';
     FooterModule,
     MarkdownModule.forRoot({ loader: HttpClient }),
     DigiNgNavigationBreadcrumbsModule,
-    LoaderModule,
+    UiLoaderModule,
   ],
   exports: [LayoutComponent],
 })
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html
deleted file mode 100644
index 889ea9a..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div [ngClass]="loaderClass">
-  <digi-icon-spinner [ngClass]="spinnerClass"></digi-icon-spinner>
-</div>
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
deleted file mode 100644
index c819bbf..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import 'mixins/backdrop';
-@import 'variables/gutters';
-@import 'variables/z-index';
-
-@keyframes spinning {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &--padded {
-    padding: $digi--layout--gutter--l;
-  }
-
-  &--absolute {
-    @include msfa__backdrop($msfa__z-index-backdrop, false);
-  }
-
-  &--full-screen {
-    @include msfa__backdrop($msfa__z-index-backdrop);
-  }
-
-  &--full-blank-screen {
-    @include msfa__backdrop($msfa__z-index-backdrop, true, true);
-  }
-
-  &__spinner {
-    display: inline-flex;
-    animation: spinning 1s linear infinite;
-
-    &--s {
-      width: 2.5rem;
-    }
-  }
-}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts
deleted file mode 100644
index 1b7198c..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/* tslint:disable:no-unused-variable */
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LoaderComponent } from './loader.component';
-
-describe('LoaderComponent', () => {
-  let component: LoaderComponent;
-  let fixture: ComponentFixture<LoaderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [LoaderComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LoaderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
deleted file mode 100644
index 279ddef..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { LoaderType } from '@msfa-enums/loader-type.enum';
-
-@Component({
-  selector: 'msfa-loader',
-  templateUrl: './loader.component.html',
-  styleUrls: ['./loader.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LoaderComponent {
-  private readonly _defaultClass = 'loader';
-  @Input() type: LoaderType;
-  @Input() size: 's' | 'm' = 'm';
-
-  get loaderClass(): string {
-    if (this.type) {
-      return `${this._defaultClass} ${this._defaultClass}--${this.type as string}`;
-    }
-    return this._defaultClass;
-  }
-
-  get spinnerClass(): string {
-    return `${this._defaultClass}__spinner ${this._defaultClass}__spinner--${this.size}`;
-  }
-}
diff --git a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts b/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts
deleted file mode 100644
index 61fef3d..0000000
--- a/apps/mina-sidor-fa/src/app/shared/components/loader/loader.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { LoaderComponent } from './loader.component';
-
-@NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  declarations: [LoaderComponent],
-  imports: [CommonModule],
-  exports: [LoaderComponent],
-})
-export class LoaderModule {}
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts
deleted file mode 100644
index d671828..0000000
--- a/apps/mina-sidor-fa/src/app/shared/enums/loader-type.enum.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum LoaderType {
-  FULL_SCREEN = 'fullscreen',
-  FULL_BLANK_SCREEN = 'full-blank-screen',
-  ABSOLUTE = 'absolute',
-  PADDED = 'padded',
-}
diff --git a/libs/ui/loader/loader.component.html b/libs/ui/loader/loader.component.html
index 1eff722..6aa2d90 100644
--- a/libs/ui/loader/loader.component.html
+++ b/libs/ui/loader/loader.component.html
@@ -1,4 +1,4 @@
 <div [ngClass]="loaderClass">
-  asdf
   <digi-icon-spinner [ngClass]="spinnerClass"></digi-icon-spinner>
+  <span class="ui-loader__text" *ngIf="uiShowLoadingText">{{uiLoadingText}}</span>
 </div>
diff --git a/libs/ui/loader/loader.component.scss b/libs/ui/loader/loader.component.scss
index 53f2c05..b4faed6 100644
--- a/libs/ui/loader/loader.component.scss
+++ b/libs/ui/loader/loader.component.scss
@@ -10,6 +10,8 @@
 
 .ui-loader {
   display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--s;
   align-items: center;
   justify-content: center;
 
@@ -37,4 +39,8 @@
       width: 2.5rem;
     }
   }
+
+  &__text {
+    font-size: var(--digi--typography--font-size--s);
+  }
 }
diff --git a/libs/ui/loader/loader.component.ts b/libs/ui/loader/loader.component.ts
index 599828b..5d67073 100644
--- a/libs/ui/loader/loader.component.ts
+++ b/libs/ui/loader/loader.component.ts
@@ -11,6 +11,8 @@ export class LoaderComponent {
   private readonly _defaultClass = 'ui-loader';
   @Input() uiType: UiLoaderType = UiLoaderType.PADDED;
   @Input() uiSize: 's' | 'm' = 'm';
+  @Input() uiShowLoadingText = false;
+  @Input() uiLoadingText = 'Laddar innehåll';
 
   get loaderClass(): string {
     if (this.uiType) {