Do not block when get post data.

3 files changed, 12 insertions, 8 deletions

diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx
index 91497705..7e5e2447 100644
--- a/Timeline/ClientApp/src/app/common/BlobImage.tsx
+++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx
@@ -3,14 +3,16 @@ import React from 'react';
 import { ExcludeKey } from '../utilities/type';

 

 const BlobImage: React.FC<

-  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & { blob?: Blob }

+  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & {

+    blob?: Blob | unknown;

+  }

 > = (props) => {

   const { blob, ...otherProps } = props;

 

   const [url, setUrl] = React.useState<string | undefined>(undefined);

 

   React.useEffect(() => {

-    if (blob != null) {

+    if (blob instanceof Blob) {

       const url = URL.createObjectURL(blob);

       setUrl(url);

       return () => {

diff --git a/Timeline/ClientApp/src/app/data/common.ts b/Timeline/ClientApp/src/app/data/common.ts
index 35934a29..87984e21 100644
--- a/Timeline/ClientApp/src/app/data/common.ts
+++ b/Timeline/ClientApp/src/app/data/common.ts
@@ -19,3 +19,5 @@ export function throwIfNotNetworkError(e: unknown): void {
     throw e;

   }

 }

+

+export type BlobOrStatus = Blob | 'loading' | 'error';

diff --git a/Timeline/ClientApp/src/app/data/timeline.ts b/Timeline/ClientApp/src/app/data/timeline.ts
index 9867b128..fc554f7b 100644
--- a/Timeline/ClientApp/src/app/data/timeline.ts
+++ b/Timeline/ClientApp/src/app/data/timeline.ts
@@ -1,12 +1,12 @@
 import React from 'react';

 import XRegExp from 'xregexp';

 import { Observable, from, combineLatest, of } from 'rxjs';

-import { map, switchMap, filter } from 'rxjs/operators';

+import { map, switchMap, startWith } from 'rxjs/operators';

 import { uniqBy } from 'lodash';

 

 import { convertError } from '../utilities/rxjs';

 

-import { dataStorage, throwIfNotNetworkError } from './common';

+import { dataStorage, throwIfNotNetworkError, BlobOrStatus } from './common';

 import { DataHub, WithSyncStatus } from './DataHub';

 

 import { UserAuthInfo, checkLogin, userService, userInfoService } from './user';

@@ -43,7 +43,7 @@ export type TimelinePostTextContent = HttpTimelinePostTextContent;
 

 export interface TimelinePostImageContent {

   type: 'image';

-  data: Blob;

+  data: BlobOrStatus;

 }

 

 export type TimelinePostContent =

@@ -481,10 +481,10 @@ export class TimelineService {
     },

   });

 

-  getPostData$(timelineName: string, postId: number): Observable<Blob> {

+  getPostData$(timelineName: string, postId: number): Observable<BlobOrStatus> {

     return this._postDataHub.getObservable({ timelineName, postId }).pipe(

-      map((state) => state.data),

-      filter((blob): blob is Blob => blob != null)

+      map((state): BlobOrStatus => state.data ?? 'error'),

+      startWith('loading')

     );

   }