better section switching

src/app/components/stream/stream.component.scss

@@ -1,6 +1,6 @@
 @import "variables";
 @import "commons";
-$stream-header-height: 40px;
+
 .stream-edition {
     width: $stream-column-width;
     position: absolute;

src/app/components/stream/user-profile/user-profile.component.html

@@ -101,10 +101,10 @@
 
             <div *ngIf="displayedAccount">
                 <div class="profile-name">
-                    <h2 class="profile-name__link profile-name__display-name" innerHTML="{{displayedAccount | accountEmoji }}"
+                    <h2 class="profile-name__link profile-name__display-name"
-                        title="{{displayedAccount.display_name}}"></h2>
+                        innerHTML="{{displayedAccount | accountEmoji }}" title="{{displayedAccount.display_name}}"></h2>
-                    <h2 class="profile-name__link profile-name__fullhandle"><a href="{{displayedAccount.url}}" target="_blank"
+                    <h2 class="profile-name__link profile-name__fullhandle"><a href="{{displayedAccount.url}}"
-                            title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
+                            target="_blank" title="{{displayedAccount.acct}}">@{{displayedAccount.acct}}</a></h2>
                 </div>
 
                 <!-- <div class="profile__extra-info">
@@ -192,6 +192,7 @@
                     </div>
                 </div>
 
+                <div [class.profile__status-switching-section]="isSwitchingSection">
                     <div *ngFor="let statusWrapper of statuses">
                         <div *ngIf="statusSection !== 'media'">
                             <app-status [statusWrapper]="statusWrapper" (browseHashtagEvent)="browseHashtag($event)"
@@ -207,9 +208,9 @@
                         </div>
                     </div>
                     <div style="clear: both;"></div>
-
                     <app-waiting-animation *ngIf="statusLoading" class="waiting-icon"></app-waiting-animation>
                 </div>                
             </div>
         </div>
     </div>
+</div>

src/app/components/stream/user-profile/user-profile.component.scss

@@ -6,6 +6,7 @@ $validated-background: #164109;
 $header-height: 140px;
 $full-alias-color: rgb(201, 201, 201);
 $full-alias-color-hover: white;
+$floating-header-height: 60px;
 
 .outer-profile {
     height: calc(100%);
@@ -24,7 +25,7 @@ $full-alias-color-hover: white;
         transition: all .2s;
         transition-timing-function: ease-in;
 
-        height: 60px;
+        height: $floating-header-height;
         width: calc(100% - 7px);
         background-position: center center;
         background-repeat: no-repeat;
@@ -42,7 +43,7 @@ $full-alias-color-hover: white;
 
         &__inner {
             overflow: hidden;
-            height: 60px;
+            height: $floating-header-height;
             background-color: rgba(0, 0, 0, .45);
         }
 
@@ -57,8 +58,8 @@ $full-alias-color-hover: white;
             position: absolute;
             top: 6px;
             left: 6px;
-            width: 46px;
+            width: calc(#{$floating-header-height} - 14px);
-            height: 46px;
+            height: calc(#{$floating-header-height} - 14px);
             border-radius: 2px;
         }
 
@@ -69,7 +70,7 @@ $full-alias-color-hover: white;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
-            height: 46px;
+            height: calc(#{$floating-header-height} - 14px);
             width: calc(100% - 44px - 65px);
             padding: 3px 5px 0px 3px;
 
@@ -342,6 +343,10 @@ $full-alias-color-hover: white;
         @include clearfix;
     }
 
+    &__status-switching-section {
+        height: calc(100vh - 35px - #{$floating-header-height} - #{$stream-header-height} - #{$stream-selector-height});
+    }
+
     &-no-toots {
         text-align: center;
         margin: 15px;

src/app/components/stream/user-profile/user-profile.component.ts

@@ -118,6 +118,7 @@ export class UserProfileComponent implements OnInit {
         this.displayedAccount = null;
         this.isLoading = true;
         this.showFloatingHeader = false;
+        this.isSwitchingSection = false;
 
         this.lastAccountName = accountName;
         this.currentlyUsedAccount = this.toolsService.getSelectedAccounts()[0];
@@ -275,7 +276,7 @@ export class UserProfileComponent implements OnInit {
             this.showFloatingHeader = false;
         }
 
-        const menuPosition = element.scrollHeight - this.profilestatuses.nativeElement.offsetHeight - 30;        
+        const menuPosition = element.scrollHeight - this.profilestatuses.nativeElement.offsetHeight - 30 - 31;
         if (element.scrollTop > menuPosition) {
             this.showFloatingStatusMenu = true;
         } else {
@@ -320,25 +321,39 @@ export class UserProfileComponent implements OnInit {
         return false;
     }
 
+    isSwitchingSection: boolean;
     switchStatusSection(section: 'status' | 'replies' | 'media'): boolean {
+        this.isSwitchingSection = true;
+
         this.statusSection = section;
         this.statuses.length = 0;
         this.maxId = null;
 
-        this.showFloatingHeader = false;
+        // this.showFloatingHeader = false;
-        this.showFloatingStatusMenu = false;
+        // this.showFloatingStatusMenu = false;
 
+        let promise: Promise<any>;
         switch (section) {
             case "status":
-                this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
+                promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, true, this.maxId);
                 break;
             case "replies":
-                this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, false, this.maxId);
+                promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, false, false, this.maxId);
                 break;
             case "media":
-                this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, true, true, this.maxId);
+                promise = this.getStatuses(this.currentlyUsedAccount, this.displayedAccount, true, true, this.maxId);
                 break;
         }
+        if (promise) {
+            promise
+                .catch(err => {                    
+                })
+                .then(() => {
+                    this.isSwitchingSection = false;
+                });
+        } else {
+            this.isSwitchingSection = false;
+        }
 
         return false;
     }

src/sass/_variables.scss

@@ -12,25 +12,17 @@ $content-warning-background-color: #0a0c13;
 $content-warning-background-color: black;
 $content-warning-font-color: $font-link-primary-hover;
 
-
-
 $default-font-size: 15px;
 $small-font-size: 12px;
-// $btn-primary-color: #515a62;
-// $btn-primary-color: #254d6f;
 $btn-primary-color: #444f74;
 $btn-primary-color-hover: darken($btn-primary-color, 10);
 $btn-primary-font-color: white;
-// TEST 1
 $status-primary-color: #fff;
-// $status-secondary-color: #353e64;
 $status-secondary-color: #4e5572;
 $status-links-color: #d9e1e8;
-// $status-primary-color : #8f93a2;
-// $status-primary-color :   lighten(#8f93a2, 30);
-// $status-links-color : #b2ccd6;
 $boost-color : #5098eb;
 $favorite-color: #ffc16f;
+
 // Block dispositions
 $stream-selector-height: 30px;
 $stream-column-separator: 7px;
@@ -38,6 +30,8 @@ $stream-column-width: 320px;
 $floating-column-size: 330px;
 $avatar-column-space: 70px;
 
+$stream-header-height: 40px;
+
 //Bootstrap cuistomization
 $enable-rounded: false;