Skip to content

Commit 488ad3e

Browse files
marcode24marcode24
committed
💄 add loader
1 parent a419181 commit 488ad3e

13 files changed

+172
-13
lines changed

‎src/app/features/folder/folder.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<app-actions [folder]="folder"></app-actions>
2-
<div class="fluid-container" *ngIf="!loading && folder">
3-
<div class="not-items" *ngIf="!allFiles.length">
2+
<div class="fluid-container">
3+
<app-loader class="loader" *ngIf="isLoading"></app-loader>
4+
<div class="not-items" *ngIf="!allFiles.length && !isLoading">
45
<img src="assets/images/no-files.svg" alt="no-files-image">
56
<span class="description">Agrega tu primer archivo o carpeta</span>
67
</div>
7-
<div class="files" *ngIf="allFiles.length">
8+
<div class="files" *ngIf="allFiles.length && !isLoading">
89
<section class="group">
910
<span class="title">Files</span>
1011
<div class="items">

‎src/app/features/folder/folder.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class FolderComponent implements OnInit, OnDestroy {
2121
private fileDeletedSubscription: Subscription;
2222

2323
folder: Folder;
24-
loading = false;
24+
isLoading = false;
2525
allFiles: (Folder | File)[];
2626

2727
constructor(
@@ -57,10 +57,10 @@ export class FolderComponent implements OnInit, OnDestroy {
5757
}
5858

5959
getFolder(): void {
60-
this.loading = true;
60+
this.isLoading = true;
6161
this.folder = this.folderService.folderTemp;
6262
this.mixFilesAndFolders();
63-
this.loading = false;
63+
this.isLoading = false;
6464
}
6565

6666
private orderFolders(): void {

‎src/app/features/folder/folder.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { CommonModule } from "@angular/common";
22
import { NgModule } from "@angular/core";
33

44
import { HeadersModule } from "@shared/headers/headers.module";
5+
import { LoadersModule } from "@shared/loaders/loaders.module";
56
import { ModalsModule } from "@shared/modals/modals.module";
67

78
import { ComponentsModule } from "./components/components.module";
@@ -15,7 +16,8 @@ import { FolderComponent } from "./folder.component";
1516
CommonModule,
1617
HeadersModule,
1718
ModalsModule,
18-
ComponentsModule
19+
ComponentsModule,
20+
LoadersModule,
1921
]
2022
})
2123
export class FolderModule {}

‎src/app/features/home/home.component.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<app-actions [folder]="root"></app-actions>
22
<div class="fluid-container">
3-
<div class="not-items" *ngIf="root.folders.length < 1 && root.files.length < 1">
3+
<app-loader class="loader" *ngIf="isLoading" ></app-loader>
4+
<div class="not-items" *ngIf="root.folders.length < 1 && root.files.length < 1 && !isLoading">
45
<img src="assets/images/no-files.svg" alt="no-files-image">
56
<span class="description">Agrega tu primer archivo o carpeta</span>
67
</div>
7-
<div class="files" *ngIf="root.folders.length > 0 || root.files.length > 0">
8+
<div class="files" *ngIf="(root.folders.length > 0 || root.files.length > 0) && !isLoading">
89
<section class="group" *ngIf="root.folders.length > 0">
910
<span class="title">Carpetas</span>
1011
<div class="items">

‎src/app/features/home/home.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,7 @@
3131
}
3232
}
3333
}
34+
35+
.loader {
36+
align-self: center;
37+
}

‎src/app/features/home/home.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class HomeComponent implements OnInit, OnDestroy {
1818
private folderCreatedSubscription: Subscription;
1919
private filesCreatedSubscription: Subscription;
2020
private fileDeletedSubscription: Subscription;
21+
isLoading = false;
2122

2223
constructor(
2324
private authService: AuthService,
@@ -32,6 +33,7 @@ export class HomeComponent implements OnInit, OnDestroy {
3233
}
3334

3435
ngOnInit(): void {
36+
this.isLoading = true;
3537
this.root = this.authService.userActive.rootFolder;
3638
this.folderService.breadcrumb = [
3739
{ _id: this.root._id as string,
@@ -52,6 +54,7 @@ export class HomeComponent implements OnInit, OnDestroy {
5254
this.fileDeletedSubscription = this.fileService.fileDeleted.subscribe((file) => {
5355
this.root.files = this.root.files.filter((f) => f._id !== file._id);
5456
});
57+
this.isLoading = false;
5558
}
5659

5760
private orderFolders(): void {

‎src/app/features/home/home.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
33

44
import { DropdownsModule } from '@shared/dropdowns/dropdowns.module';
55
import { HeadersModule } from '@shared/headers/headers.module';
6+
import { LoadersModule } from '@shared/loaders/loaders.module';
67
import { ModalsModule } from '@shared/modals/modals.module';
78

89
import { ComponentsModule } from './components/components.module';
@@ -17,7 +18,8 @@ import { HomeComponent } from './home.component';
1718
DropdownsModule,
1819
ComponentsModule,
1920
HeadersModule,
20-
ModalsModule
21+
ModalsModule,
22+
LoadersModule,
2123
]
2224
})
2325
export class HomeModule { }

‎src/app/shared/loaders/loader/loader.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="roller">
2+
<div></div>
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
<div></div>
8+
<div></div>
9+
<div></div>
10+
</div>

‎src/app/shared/loaders/loader/loader.component.scss

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.roller {
2+
display: inline-block;
3+
position: relative;
4+
width: 80px;
5+
height: 80px;
6+
div {
7+
animation: roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
8+
transform-origin: 40px 40px;
9+
&:after {
10+
content: " ";
11+
display: block;
12+
position: absolute;
13+
width: 9px;
14+
height: 9px;
15+
border-radius: 50%;
16+
background: var(--fc-purple);
17+
margin: -4px 0 0 -4px;
18+
}
19+
&:nth-child(1) {
20+
animation-delay: -0.036s;
21+
&:after {
22+
top: 63px;
23+
left: 63px;
24+
}
25+
}
26+
&:nth-child(2) {
27+
animation-delay: -0.072s;
28+
&:after {
29+
top: 68px;
30+
left: 56px;
31+
}
32+
}
33+
&:nth-child(3) {
34+
animation-delay: -0.108s;
35+
&:after {
36+
top: 71px;
37+
left: 48px;
38+
}
39+
}
40+
&:nth-child(4) {
41+
animation-delay: -0.144s;
42+
&:after {
43+
top: 72px;
44+
left: 40px;
45+
}
46+
}
47+
&:nth-child(5) {
48+
animation-delay: -0.18s;
49+
&:after {
50+
top: 71px;
51+
left: 32px;
52+
}
53+
}
54+
&:nth-child(6) {
55+
animation-delay: -0.216s;
56+
&:after {
57+
top: 68px;
58+
left: 24px;
59+
}
60+
}
61+
&:nth-child(7) {
62+
animation-delay: -0.252s;
63+
&:after {
64+
top: 63px;
65+
left: 17px;
66+
}
67+
}
68+
&:nth-child(8) {
69+
animation-delay: -0.288s;
70+
&:after {
71+
top: 56px;
72+
left: 12px;
73+
}
74+
}
75+
}
76+
}
77+
78+
79+
@keyframes roller {
80+
0% {
81+
transform: rotate(0deg);
82+
}
83+
100% {
84+
transform: rotate(360deg);
85+
}
86+
}

‎src/app/shared/loaders/loader/loader.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { LoaderComponent } from './loader.component';
4+
5+
describe('LoaderComponent', () => {
6+
let component: LoaderComponent;
7+
let fixture: ComponentFixture<LoaderComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ LoaderComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(LoaderComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)