feat: loading spinner

src/app/components/aux-panes/thread-view/thread-view.component.html

···
 
     <divider/>
   </div>
+} @else {
+  <div
+    class="h-full w-full flex justify-center mt-16 text-4xl"
+  >
+    <spinner/>
+  </div>
 }
 
 <ng-template

src/app/components/aux-panes/thread-view/thread-view.component.ts

···
 import {DialogService} from '@services/dialog.service';
 import {NgTemplateOutlet} from '@angular/common';
 import {DividerComponent} from '@components/shared/divider/divider.component';
+import {SpinnerComponent} from '@components/shared/spinner/spinner.component';
 
 @Component({
   selector: 'thread-view',
···
     IsFeedDefsBlockedPostPipe,
     PostCardComponent,
     NgTemplateOutlet,
-    DividerComponent
+    DividerComponent,
+    SpinnerComponent
   ],
   templateUrl: './thread-view.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/components/feeds/author-feed/author-feed.component.html

···
 
       <divider/>
     }
-<!--  } @else {-->
-<!--    <div-->
-<!--      class="h-full w-full flex items-center justify-center"-->
-<!--    >-->
-<!--      <p-progress-spinner-->
-<!--        class="h-12"-->
-<!--        strokeWidth="5"-->
-<!--        [style]="{height: '3rem', width: '3rem'}"-->
-<!--      />-->
-<!--    </div>-->
+  } @else {
+    <div
+      class="h-full w-full flex justify-center mt-16 text-4xl"
+    >
+      <spinner/>
+    </div>
   }
 </div>

src/app/components/feeds/author-feed/author-feed.component.ts

···
 import {GroupedPost} from '@models/grouped-post';
 import {PostCardGrandParentPipe} from '@shared/pipes/post-card-grandparent.pipe';
 import {PostCardParentPipe} from '@shared/pipes/post-card-parent.pipe';
+import {SpinnerComponent} from '@components/shared/spinner/spinner.component';
 
 @Component({
   selector: 'author-feed',
···
     DividerComponent,
     PostCardGrandParentPipe,
     PostCardParentPipe,
+    SpinnerComponent,
   ],
   templateUrl: './author-feed.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/components/feeds/notification-feed/notification-feed.component.html

···
 
       <divider/>
     }
-<!--  } @else {-->
-<!--    <div-->
-<!--      class="h-full w-full flex items-center justify-center"-->
-<!--    >-->
-<!--      <p-progress-spinner-->
-<!--        class="h-12"-->
-<!--        strokeWidth="5"-->
-<!--        [style]="{height: '3rem', width: '3rem'}"-->
-<!--      />-->
-<!--    </div>-->
+  } @else {
+    <div
+      class="h-full w-full flex justify-center mt-16 text-4xl"
+    >
+      <spinner/>
+    </div>
   }
 </div>

src/app/components/feeds/notification-feed/notification-feed.component.ts

···
 import {MessageService} from '@services/message.service';
 import {DividerComponent} from '@components/shared/divider/divider.component';
 import {DialogService} from '@services/dialog.service';
+import {SpinnerComponent} from '@components/shared/spinner/spinner.component';
 
 @Component({
   selector: 'notification-feed',
···
     IsNotificationArrayPipe,
     NotificationCardComponent,
     DividerComponent,
+    SpinnerComponent,
   ],
   templateUrl: './notification-feed.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/components/feeds/timeline-feed/timeline-feed.component.html

···
 
       <divider/>
     }
-<!--  } @else {-->
-<!--    <div-->
-<!--      class="h-full w-full flex items-center justify-center"-->
-<!--    >-->
-<!--      <p-progress-spinner-->
-<!--        class="h-12"-->
-<!--        strokeWidth="5"-->
-<!--        [style]="{height: '3rem', width: '3rem'}"-->
-<!--      />-->
-<!--    </div>-->
+  } @else {
+    <div
+      class="h-full w-full flex justify-center mt-16 text-4xl"
+    >
+      <spinner/>
+    </div>
   }
 </div>

src/app/components/feeds/timeline-feed/timeline-feed.component.ts

···
 import {FeedService} from '@services/feed.service';
 import {PostCardGrandParentPipe} from '@shared/pipes/post-card-grandparent.pipe';
 import {PostCardParentPipe} from '@shared/pipes/post-card-parent.pipe';
+import {SpinnerComponent} from '@components/shared/spinner/spinner.component';
 
 @Component({
   selector: 'timeline-feed',
···
     DividerComponent,
     PostCardGrandParentPipe,
     PostCardParentPipe,
+    SpinnerComponent,
   ],
   templateUrl: './timeline-feed.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/components/navigation/post-composer/post-composer.component.html

···
         <button
           class="btn-secondary h-9 flex-1 border-0 p-0 flex items-center justify-center"
           (click)="uploader.click()"
+          [disabled]="(mediaEmbed | isMediaEmbedImage) ? mediaEmbed.images.length == 4 : mediaEmbed"
         >
           <span
             class="material-icons-outlined !text-xl"
···
         class="btn-primary font-semibold h-16 w-full border-0 border-l"
         [disabled]="loading || text.innerText.length > 300 || (!text.innerText.length && !mediaEmbed && !recordEmbed)"
         (click)="publishPost()"
-      >post</button>
+      >post
+        @if (loading) {
+          <spinner
+            class="absolute ml-2 mt-0.5"
+          />
+        }
+      </button>
     </div>
   </div>
 </div>

src/app/components/navigation/post-composer/post-composer.component.ts

···
 import {IsGraphDefsStarterPackViewPipe} from '@shared/pipes/type-guards/is-graph-defs-starterpack-view';
 import {ExternalEmbedComponent} from '@components/embeds/external-embed/external-embed.component';
 import {MessageService} from '@services/message.service';
+import {SpinnerComponent} from '@components/shared/spinner/spinner.component';
 
 @Component({
   selector: 'post-composer',
···
     IsFeedDefsGeneratorViewPipe,
     IsGraphDefsListViewPipe,
     IsGraphDefsStarterPackViewPipe,
-    ExternalEmbedComponent
+    ExternalEmbedComponent,
+    SpinnerComponent
   ],
   templateUrl: './post-composer.component.html',
   styles: `

src/app/components/shared/spinner/spinner.component.ts

···
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
+
+@Component({
+  selector: 'spinner',
+  imports: [],
+  template: `
+    <div
+      class="flex h-[1em] w-[1em] items-center justify-center"
+    >
+      <span
+        class="-translate-y-[0.1em] font-bold"
+      >{{chars[index]}}</span>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SpinnerComponent implements OnDestroy {
+  chars = ['|', '/', '–', '\\'];
+  index = 0;
+  loop = setInterval(() => {
+    this.index = this.index == 3 ? 0 : this.index + 1;
+    this.cdRef.markForCheck();
+  }, 250);
+
+  constructor(
+    private cdRef: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    clearInterval(this.loop);
+  }
+}