reload the records counter and remove drafts failures from LocalStorage

CHANGELOG.md

@@ -13,7 +13,7 @@
 - Various Admin UI improvements:
   - Count the total records separately to speed up the query execution for large datasets ([#3344](https://github.com/pocketbase/pocketbase/issues/3344)).
   - Enclosed the listing scrolling area within the table so that the horizontal scrollbar and table header are always reachable ([#2505](https://github.com/pocketbase/pocketbase/issues/2505)).
-  - Allowed opening the record update form via direct URL ([#2682](https://github.com/pocketbase/pocketbase/discussions/2682)).
+  - Allowed opening the record preview/update form via direct URL ([#2682](https://github.com/pocketbase/pocketbase/discussions/2682)).
   - Reintroduced the local `date` field tooltip on hover.
   - Speed up the listing loading times for records with large `editor` field values by initially fetching only a partial of the records data (the complete record data is loaded on record preview/update).
 

ui/src/components/records/PageRecords.svelte

@@ -175,7 +175,12 @@
                     </button>
                 {/if}
 
-                <RefreshButton on:refresh={() => recordsList?.load()} />
+                <RefreshButton
+                    on:refresh={() => {
+                        recordsList?.load();
+                        recordsCount?.reload();
+                    }}
+                />
             </div>
 
             <div class="btns-group">

ui/src/components/records/RecordUpsertPanel.svelte

@@ -184,6 +184,7 @@
             // ignore local storage errors in case the serialized data
             // exceed the browser localStorage single value quota
             console.warn("updateDraft failure:", e);
+            window.localStorage.removeItem(draftKey());
         }
     }
 
@@ -535,11 +536,12 @@
         {/if}
     </svelte:fragment>
 
-    <div class="tabs-content">
+    <div class="tabs-content no-animations">
         <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
         <form
             id={formId}
             class="tab-item"
+            class:no-pointer-events={isLoading}
             class:active={activeTab === tabFormKey}
             on:submit|preventDefault={save}
             on:keydown={handleFormKeydown}

ui/src/components/records/fields/EditorField.svelte

@@ -5,7 +5,7 @@
     import { onMount } from "svelte";
 
     export let field;
-    export let value = undefined;
+    export let value = "";
 
     let mounted = false;
     let mountedTimeoutId = null;
@@ -22,6 +22,7 @@
     }
 
     onMount(() => {
+        // slight "offset" the editor mount to avoid blocking the rendering of the other fields
         mountedTimeoutId = setTimeout(() => {
             mounted = true;
         }, 100);