Dynamic gallery with flex-box - angularjs

Question

In the following image which is my implementation, I have two sets of photos, the first group is uploading ones, and the second groups are the uploaded ones.
In reality, right after the last uploading image, the second group should start.
I started style with available photos, later adding uploading images stamp was added, and codes are becoming spaghetti.
I looking for a way to make the asked scenario. Any idea?
My simplified HTML codes is (beside the html comments, I put some comments with ** here for explanation)
<div class="gallery-wrapper">
<ng-container *ngFor="let file of progressFiles; let i = index;">
<div class="frame">
<div class="photo-wrapper">
<img [src]="sanitizer.bypassSecurityTrustResourceUrl(file.src)" alt="dragged images" width="150" height="150">
</div>
<div class="waiting-frame">
<div *ngIf="heading === 'VIDEO'" class="loader">Loading...</div>
<div *ngIf="heading === 'PHOTO'" class="loader">Loading...</div>
</div>
</div>
</ng-container>
<!-- this part read medias -->
<div *ngIf="mediaContent && mediaContent.length">
<!-- draged and dropped medias -->
<div dnd-sortable-container [sortableData]="mediaContent">
<ng-container *ngFor="let media of mediaContent ; let i = index">
<div dnd-sortable [sortableIndex]="i" class="frame" (click)="openModal(i, mediaEdit)">
<div class="photo-wrapper">
<img *ngIf="media.thumbnail" src="{{media.thumbnail}}" alt="dragged images">
</div>
<div class="modifiers hidden-sm hidden-xs">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2" tooltip="{{ 'ROTATE' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-editor adjust" tooltip="{{ 'EDIT' | translate }}" placement="top" tooltipAnimation="true"></div>
<div class="sprite sprite-garbage-bin-black" tooltip="{{ 'DELETE' | translate }}" placement="top" tooltipAnimation="true" (click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true" *ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
<div class="modifiers visible-sm-inline-block visible-xs-inline-block">
<div [ngClass]="{'icon vg-icon-play_arrow': heading == 'VIDEO'}"></div>
<div class="sprite sprite-rotate adjust2"></div>
<div class="sprite sprite-editor adjust"></div>
<div class="sprite sprite-garbage-bin-black"
(click)="deleteMedia($event, i)"></div>
<div class="sprite sprite-exclamation adjust3" tooltip="{{ 'MISSING_DESCRIPTION' | translate }}" placement="top" tooltipAnimation="true"
*ngIf="!media.description.fr && !media.description.en" (click)="stopPropagation($event)"></div>
</div>
</div>
</ng-container>
</div>
</div>
</div>
And here is my SASS codes using flex-box technique.
.gallery-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
margin-left: -5px;
margin-right: -5px;
.frame {
margin: 10px;
border-radius: 6px;
border: 1px solid $gray;
max-width: 152px;
height: 194px;
overflow: hidden;
position: relative;
cursor: move !important;
display: inline-block;
.photo-wrapper {
width: 100%;
height: 150px;
overflow: hidden;
border-bottom: 1px solid $gray;
display: flex;
align-items: center;
background-color: $gray-light;
img {
display: inline-block;
width: 100%;
height: auto;
max-height: 150px;
pointer-events: none;
}
}
.modifiers {
display: inline-block;
position: relative;
padding: 8px 20px;
}
.waiting-frame {
display: inline-block;
text-align: center;
position: absolute;
background-color: $gray-base;
opacity: 0.6;
bottom: 0;
left: 0;
right: 0;
width: 150px;
height: 194px;
border-radius: 6px;
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 50px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 247, 0, 0.2);
border-right: 1.1em solid rgba(255, 247, 0, 0.2);
border-bottom: 1.1em solid rgba(255, 247, 0, 0.2);
border-left: 1.1em solid $brand-primary;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
}