src/app/modules/pro/channel/categories/categories.component.scss

 m-pro--channel--categories {
  display: flex;
  flex-wrap: wrap;
- justify-content: flex-end;
+ justify-content: center;
 
  .m-proChannel__category {
  cursor: pointer;
  color: var(--m-pro--text-color);
- padding: 16px 16px 0;
+ background: var(--m-pro--transparent-background-color);
+
+ padding: 4px 8px;
+ margin: 0 12px 8px;
+ border-radius: 4px;
 
  text-transform: uppercase;
  letter-spacing: 0.1em;

src/app/modules/pro/channel/home/home.component.scss

 .m-pro--channel-home {
+ margin-top: 72px;
+
  .m-pro--channel-home--section {
  margin-top: 72px;
 

src/app/modules/pro/channel/list-modal/list-modal.component.html

@@ -5,7 +5,7 @@
  >
  <ng-container *ngFor="let entity$ of (entities$ | async); let i = index">
  <ng-container *ngIf="entity$ | async as entity">
- <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
+ <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
  <m-pro--channel-tile
  [entity]="entity"
  (click)="expand(entity)"

src/app/modules/pro/channel/list/list.component.html

@@ -10,7 +10,7 @@
  </div>
 </div>
 
-<div class="m-proChannelList__content">
+<div class="m-proChannelList__content" *ngIf="!(inProgress$ | async); else inProgressLoader">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
  <li *ngFor="let entity of entities; let i = index">
  <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
@@ -49,3 +49,8 @@
  <!-- talk to Emi about this -->
  </ng-container>
 </div>
+<ng-template #inProgressLoader>
+ <div class="m-proChannelList__loader">
+ <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+ </div>
+</ng-template>

src/app/modules/pro/channel/list/list.component.scss

@@ -5,19 +5,15 @@ m-pro--channel-list {
  margin: 0 0 0.4em;
  }
 
- @media screen and (max-width: 480px) {
- m-pro--channel--categories {
- justify-content: start;
- }
- }
-
  m-pro--channel--categories {
- margin: 8px 0;
+ margin: 16px 0 32px;
+
+ @media screen and (max-width: 480px) {
+ margin: 8px;
+ }
  }
 
  .m-proChannelList__tools {
- //background-color: var(--m-pro--plain-background-color) !important;
- //padding: 16px;
  height: 70px;
  border-radius: 20px;
  opacity: 0.9;
@@ -45,22 +41,15 @@ m-pro--channel-list {
  }
 
  .m-proChannelListTools__searchResult {
- //padding: 8px;
- //margin-top: 12px;
  font-weight: 300;
  color: var(--m-pro--text-color);
  font-size: 20px;
- //h2 {
- // margin: 0;
- //}
  }
  }
 
  .m-proChannelList__content {
  width: 85%;
  margin: 0 auto;
- //display: flex;
- //align-items: center;
  justify-content: center;
 
  & > i.material-icons {
@@ -68,7 +57,6 @@ m-pro--channel-list {
  margin-top: 100px;
  height: fit-content;
  }
-
  }
 
  .m-proChannelListContent__noContent {
@@ -79,7 +67,7 @@ m-pro--channel-list {
  padding: 8px;
  margin: 0 auto;
  text-align: center;
- background-color: var(--m-pro--plain-background-color);
+ background-color: var(--m-pro--transparent-background-color);
  color: var(--m-pro--text-color);
  }
 
@@ -134,13 +122,11 @@ m-pro--channel-list {
 
  & > li:nth-child(1) {
  grid-column: span 2;
- margin-bottom: $minds-padding * 4;
  justify-content: flex-start;
  }
 
  & > li:nth-child(2) {
  grid-column: 3 / span 2;
- margin-bottom: $minds-padding * 4;
 
  &:not(.m-proChannelListContentList__seeMore) {
  justify-content: flex-end;
@@ -186,6 +172,11 @@ m-pro--channel-list {
  }
  }
 
+ .m-proChannelList__loader {
+ text-align: center;
+ margin: 16px 0;
+ }
+
  @media screen and (min-width: 1px) and (max-width: $min-desktop) {
  .m-proChannelList__content {
  margin: 0;

src/app/modules/pro/channel/list/list.component.ts

@@ -18,6 +18,7 @@ import { Tag } from "../../../../interfaces/entities";
 export class ProChannelListComponent implements OnInit, OnDestroy {
 
  paramsType: string; // exact string that came from the router params
+
  type: string;
 
  params$: Subscription;
@@ -156,6 +157,10 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  this.feedsService.loadMore();
  }
 
+ get inProgress$() {
+ return this.feedsService.inProgress;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();