[PER-10275] Fixed archive selector modal available archives list

Author: aasandei-vsp

src/app/component-library/components.module.ts

@@ -11,6 +11,7 @@ import { ButtonComponent } from './components/button/button.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
 import { CheckboxComponent } from './components/checkbox/checkbox.component';
 import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
+import { BasicLoadingSpinnerComponent } from './components/basic-loading-spinner/basic-loading-spinner.component';
 
 @NgModule({
 	declarations: [
@@ -19,6 +20,7 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp
 		ButtonComponent,
 		CheckboxComponent,
 		LoadingSpinnerComponent,
+		BasicLoadingSpinnerComponent,
 	],
 	imports: [CommonModule, FontAwesomeModule, FormsModule, ReactiveFormsModule],
 	exports: [
@@ -27,6 +29,7 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp
 		ButtonComponent,
 		CheckboxComponent,
 		LoadingSpinnerComponent,
+		BasicLoadingSpinnerComponent,
 	],
 })
 export class ComponentsModule {

src/app/component-library/components/basic-loading-spinner/basic-loading-spinner.component.html

@@ -0,0 +1,85 @@
+<div>
+	<svg
+		width="118"
+		height="110"
+		viewBox="0 0 118 110"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<g class="outer-circle" filter="url(#filter0_d_6094_25361)">
+			<path
+				d="M76.186 39.5004C77.5649 41.8887 78.4598 44.5252 78.8198 47.2594C79.1798 49.9935 78.9977 52.7718 78.2839 55.4356C77.5701 58.0994 76.3387 60.5965 74.6599 62.7844C72.9811 64.9723 70.8877 66.8081 68.4995 68.187C66.1112 69.5658 63.4747 70.4608 60.7405 70.8208C58.0063 71.1807 55.228 70.9986 52.5643 70.2849C49.9005 69.5711 47.4033 68.3397 45.2155 66.6608C43.0276 64.982 41.1918 62.8887 39.8129 60.5004"
+				stroke="url(#paint0_linear_6094_25361)"
+				stroke-width="6"
+				stroke-linecap="round"
+			/>
+		</g>
+		<g class="inner-circle">
+			<path
+				d="M50.9289 42.9289C51.8575 42.0003 52.9599 41.2637 54.1732 40.7612C55.3864 40.2586 56.6868 40 58 40C59.3132 40 60.6136 40.2586 61.8268 40.7612C63.0401 41.2637 64.1425 42.0003 65.0711 42.9289C65.9997 43.8575 66.7362 44.9599 67.2388 46.1732C67.7413 47.3864 68 48.6868 68 50C68 51.3132 67.7413 52.6136 67.2388 53.8268C66.7362 55.0401 65.9997 56.1425 65.0711 57.0711"
+				stroke="url(#paint1_linear_6094_25361)"
+				stroke-width="6"
+				stroke-linecap="round"
+			/>
+		</g>
+		<defs>
+			<filter
+				id="filter0_d_6094_25361"
+				x="-2"
+				y="-10"
+				width="120"
+				height="120"
+				filterUnits="userSpaceOnUse"
+				color-interpolation-filters="sRGB"
+			>
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feColorMatrix
+					in="SourceAlpha"
+					type="matrix"
+					values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+					result="hardAlpha"
+				/>
+				<feOffset />
+				<feGaussianBlur stdDeviation="18" />
+				<feComposite in2="hardAlpha" operator="out" />
+				<feColorMatrix
+					type="matrix"
+					values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.32 0"
+				/>
+				<feBlend
+					mode="normal"
+					in2="BackgroundImageFix"
+					result="effect1_dropShadow_6094_25361"
+				/>
+				<feBlend
+					mode="normal"
+					in="SourceGraphic"
+					in2="effect1_dropShadow_6094_25361"
+					result="shape"
+				/>
+			</filter>
+			<linearGradient
+				id="paint0_linear_6094_25361"
+				x1="25.2148"
+				y1="41.2158"
+				x2="80.3161"
+				y2="24.4276"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="#800080" />
+				<stop offset="1" stop-color="#FF9933" />
+			</linearGradient>
+			<linearGradient
+				id="paint1_linear_6094_25361"
+				x1="58"
+				y1="68.3848"
+				x2="41.4914"
+				y2="41.9089"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="#800080" />
+				<stop offset="1" stop-color="#FF9933" />
+			</linearGradient>
+		</defs>
+	</svg>
+</div>

src/app/component-library/components/basic-loading-spinner/basic-loading-spinner.component.scss

@@ -0,0 +1,29 @@
+.outer-circle {
+	animation: spin-outer 2s linear infinite;
+	transform-origin: 50% 50%; /* Center the rotation */
+	transform-box: fill-box;
+}
+
+.inner-circle {
+	animation: spin-inner 2s linear infinite;
+	transform-origin: 50% 50%; /* Center the rotation */
+	transform-box: fill-box;
+}
+
+@keyframes spin-outer {
+	0% {
+		transform: scale(1.4) rotate(300deg);
+	}
+	100% {
+		transform: scale(1.4) rotate(660deg);
+	}
+}
+
+@keyframes spin-inner {
+	0% {
+		transform: scale(0.9) translate(-0.5px, 6.5px) rotate(45deg);
+	}
+	100% {
+		transform: scale(0.9) translate(-0.5px, 6px) rotate(-315deg);
+	}
+}

src/app/component-library/components/basic-loading-spinner/basic-loading-spinner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicLoadingSpinnerComponent } from './basic-loading-spinner.component';
+
+describe('BasicLoadingSpinnerComponent', () => {
+	let component: BasicLoadingSpinnerComponent;
+	let fixture: ComponentFixture<BasicLoadingSpinnerComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [BasicLoadingSpinnerComponent],
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(BasicLoadingSpinnerComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/component-library/components/basic-loading-spinner/basic-loading-spinner.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'pr-basic-loading-spinner',
+	templateUrl: './basic-loading-spinner.component.html',
+	styleUrl: './basic-loading-spinner.component.scss',
+	standalone: false,
+})
+export class BasicLoadingSpinnerComponent {}

src/app/component-library/components/button/button.component.spec.ts

@@ -1,12 +1,12 @@
 import { Shallow } from 'shallow-render';
-import { SharedModule } from '@shared/shared.module';
+import { ComponentsModule } from '../../components.module';
 import { ButtonComponent } from './button.component';
 
 describe('ButtonComponent', () => {
 	let shallow: Shallow<ButtonComponent>;
 
 	beforeEach(async () => {
-		shallow = new Shallow(ButtonComponent, SharedModule);
+		shallow = new Shallow(ButtonComponent, ComponentsModule);
 	});
 
 	it('should create', async () => {

src/app/core/components/archive-switcher/archive-switcher.component.spec.ts

@@ -29,7 +29,6 @@ import { ManageMetadataModule } from '../archive-settings/manage-metadata/manage
 import { DirectiveModule } from '../directive/directive.module';
 import { FilesystemModule } from '../filesystem/filesystem.module';
 import { UserChecklistModule } from '../user-checklist/user-checklist.module';
-import { ArchiveSwitcherComponent } from './components/archive-switcher/archive-switcher.component';
 import { MultiSelectStatusComponent } from './components/multi-select-status/multi-select-status.component';
 import { EditService } from './services/edit/edit.service';
 import { AccountSettingsComponent } from './components/account-settings/account-settings.component';
@@ -90,7 +89,6 @@ import { RedeemGiftComponent } from './components/redeem-gift/redeem-gift.compon
 		RightMenuComponent,
 		UploadProgressComponent,
 		UploadButtonComponent,
-		ArchiveSwitcherComponent,
 		FolderPickerComponent,
 		MultiSelectStatusComponent,
 		AccountSettingsComponent,

src/app/core/core.module.ts

@@ -7,7 +7,7 @@ import { RootFolderResolveService } from '@core/resolves/root-folder-resolve.ser
 import { RecordResolveService } from '@core/resolves/record-resolve.service';
 import { ArchivesResolveService } from '@core/resolves/archives-resolve.service';
 import { SharedModule } from '@shared/shared.module';
-import { ArchiveSwitcherComponent } from '@core/components/archive-switcher/archive-switcher.component';
+import { ArchiveSwitcherComponent } from '@shared/components/archive-switcher/archive-switcher.component';
 import { GlobalSearchResultsComponent } from '@search/components/global-search-results/global-search-results.component';
 import { RoutedDialogWrapperComponent } from '@shared/components/routed-dialog-wrapper/routed-dialog-wrapper.component';
 import { RoutesWithData } from '../app.routes';

src/app/core/core.routes.ts

@@ -9,9 +9,12 @@
 			>
 			</pr-archive-small>
 		}
-		@if (!archives.length) {
+		@if (!archivesLoading && !archives.length) {
 			<div class="archives-empty">You have no other archives</div>
 		}
+		@if (archivesLoading) {
+			<pr-basic-loading-spinner></pr-basic-loading-spinner>
+		}
 	</div>
 </div>
 <div class="archive-list-button">