feat/Enable overriding Flatfile default loading component

.changeset/proud-books-rush.md

@@ -0,0 +1,5 @@
+---
+'@flatfile/angular-sdk': minor
+---
+
+Allow overriding the default loading component in Angular by assigning a custom TemplateRef to the ISpace['loading'] property. This enables users to replace the default loading spinner with their own loading template.

packages/angular/angular-sdk/src/lib/sdk/space.component.html

@@ -1,14 +1,22 @@
-<div *ngIf="!this.closeInstance">
-  <spinner *ngIf="this.loading"/>
+<div *ngIf="!closeInstance">
+  <ng-container
+    *ngIf="spaceProps.loading && loading"
+    [ngTemplateOutlet]="spaceProps.loading"
+  />
+  <spinner *ngIf="loading && !spaceProps.loading" />
 
-  <div *ngIf="this.spaceFrameProps !== undefined;else error_content">
-    <space-frame *ngIf="this.spaceFrameProps.localAccessToken" [loading]="this.loading" [spaceFrameProps]="this.spaceFrameProps" />
+  <div *ngIf="spaceFrameProps !== undefined; else error_content">
+    <space-frame
+      *ngIf="spaceFrameProps.localAccessToken"
+      [loading]="loading"
+      [spaceFrameProps]="spaceFrameProps"
+    />
   </div>
   <ng-template #error_content>
-    <div *ngIf="this.error" class="ff_error_container">
+    <div *ngIf="error" class="ff_error_container">
       <h3 class="ff_error_heading">Something Went Wrong</h3>
-      <p class="ff_error_text">
-        {{this.error.message}}
+      <p class="ff_error_text" *ngIf="error.message">
+        {{ error.message }}
       </p>
     </div>
   </ng-template>

packages/angular/angular-sdk/src/lib/sdk/space.component.ts

@@ -1,16 +1,23 @@
-import { Component, Input, OnInit } from '@angular/core'
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core'
+import { Flatfile } from '@flatfile/api'
 import {
   type ISpace,
+  InitialResourceData,
   type ReusedSpaceWithAccessToken,
   type SimpleOnboarding,
   createWorkbookFromSheet,
   initNewSpace,
-  InitialResourceData,
 } from '@flatfile/embedded-utils'
 import getSpace from '../../utils/getSpace'
 import { SpaceFramePropsType } from './space-frame/spaceFrame.component'
 import { SpaceService } from './space.service'
-import { Flatfile } from '@flatfile/api'
 
 type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding
 
@@ -19,7 +26,7 @@ type ReusedOrOnboarding = ReusedSpaceWithAccessToken | SimpleOnboarding
   templateUrl: './space.component.html',
   styleUrls: ['./space.component.scss'],
 })
-export class Space implements OnInit {
+export class Space implements OnInit, OnChanges {
   @Input() spaceProps!: ISpace
   @Input() openDirectly: boolean = false
 
@@ -30,7 +37,10 @@ export class Space implements OnInit {
   loading: boolean = false
   closeInstance: boolean = false
 
-  constructor(private readonly appService: SpaceService) {}
+  constructor(
+    private readonly appService: SpaceService,
+    private readonly changeDetectorRef: ChangeDetectorRef
+  ) {}
 
   async ngOnInit() {
     if (!this.spaceProps) throw new Error('Please define the space props')
@@ -44,6 +54,16 @@ export class Space implements OnInit {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('spaceProps' in changes && !changes['spaceProps'].firstChange) {
+      this.spaceProps = {
+        ...this.spaceProps,
+        ...changes['spaceProps'].currentValue,
+      }
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
   handleCloseInstance() {
     this.closeInstance = true
   }
@@ -91,6 +111,7 @@ export class Space implements OnInit {
   }
 
   initSpace = async (spaceProps: ReusedOrOnboarding) => {
+    this.changeDetectorRef.markForCheck()
     this.closeInstance = false
 
     try {
@@ -128,6 +149,8 @@ export class Space implements OnInit {
       this.loading = false
       this.error = error as Error
       throw error
+    } finally {
+      this.changeDetectorRef.markForCheck()
     }
   }
 }