Feature(reviews): add loading screen

src/Logic/Web/MangroveReviews.ts

@@ -149,7 +149,7 @@ export default class FeatureReviews {
     public readonly average: Store<number | null>
     private readonly _reviews: UIEventSource<
         (Review & { kid: string; signature: string; madeByLoggedInUser: Store<boolean> })[]
-    > = new UIEventSource([])
+    > = new UIEventSource(undefined)
     public readonly reviews: Store<(Review & { signature: string, madeByLoggedInUser: Store<boolean> })[]> =
         this._reviews
     private readonly _lat: number
@@ -159,11 +159,6 @@ export default class FeatureReviews {
     private readonly _identity: MangroveIdentity
     private readonly _testmode: Store<boolean>
     public readonly loadingAllowed: UIEventSource<boolean | null>
-    private readonly _options: Readonly<{
-        nameKey?: "name" | string
-        fallbackName?: string
-        uncertaintyRadius?: number
-    }>
     private readonly _reportError: (msg: string, extra: string) => Promise<void>
 
     private constructor(
@@ -186,7 +181,6 @@ export default class FeatureReviews {
         this._identity = mangroveIdentity
         this._testmode = testmode ?? new ImmutableStore(false)
         const nameKey = options?.nameKey ?? "name"
-        this._options = options
         if (options.uncertaintyRadius) {
             this._uncertainty = options.uncertaintyRadius
         } else if (feature.geometry.type === "Point") {
@@ -383,11 +377,18 @@ export default class FeatureReviews {
             signature: "",
             madeByLoggedInUser: new ImmutableStore(true),
         }
+        this.initReviews()
         this._reviews.data.push(reviewWithKid)
         this._reviews.ping()
         this._identity.addReview(reviewWithKid)
     }
 
+    private initReviews(){
+        if(this._reviews.data === undefined){
+            this._reviews.set([])
+        }
+    }
+
     /**
      * Adds given reviews to the 'reviews'-UI-eventsource, if they match close enough.
      * We assume only geo-reviews are passed in (as they should be queried using the 'geo'-part)
@@ -398,9 +399,11 @@ export default class FeatureReviews {
         reviews: { payload: Review; kid: string; signature: string }[],
         expectedName: string
     ) {
-        const alreadyKnown = new Set(this._reviews.data.map((r) => r.rating + " " + r.opinion))
+        const alreadyKnown = new Set(this._reviews.data?.map((r) => r.rating + " " + r.opinion))
 
         let hasNew = false
+        this.initReviews()
+
         for (const reviewData of reviews) {
             const review = reviewData.payload
 
@@ -457,7 +460,7 @@ export default class FeatureReviews {
 
     public removeReviewLocally(review: Review){
         this._reviews.set(
-            this._reviews.data.filter(r => r !== review)
+            this._reviews.data?.filter(r => r !== review)
         )
 
     }

src/UI/Reviews/AllReviews.svelte

@@ -11,6 +11,7 @@
   import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import type { Feature } from "geojson"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import Loading from "../Base/Loading.svelte"
   /**
    * An element showing all reviews
    */
@@ -33,22 +34,26 @@
 
 <ReviewPrivacyShield {reviews} guistate={state.guistate}>
   <div class="border-2 border-dashed border-gray-300 p-2 flex flex-col gap-y-2">
-    {#if $allReviews.length > 1}
+    {#if $allReviews?.length > 1}
       <StarsBar score={$average} />
     {/if}
-    {#if $allReviews.length > 0}
+    {#if !$allReviews}
+      <div class="flex justify-center">
+      <Loading/>
+      </div>
+    {:else if $allReviews.length > 0}
       {#each $allReviews as review}
         <SingleReview {review} {state} {tags} {feature} {layer} {reviews}/>
       {/each}
     {:else}
-      <div class="subtle m-2 italic">
+      <div class="subtle m-2 italic flex justify-center">
         <Tr t={Translations.t.reviews.no_reviews_yet} />
       </div>
     {/if}
     <div class="flex justify-end">
       <a
         href={"https://mangrove.reviews" +
-          ($allReviews.length == 0 ? "" : "/search?sub=" + encodeURIComponent($subject))}
+          ($allReviews?.length > 0 ?"/search?sub=" + encodeURIComponent($subject):"")}
         target="_blank"
         class="subtle text-sm"
       >