tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimized record upsert panel loading to minimize layout jumps

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-22 23:02:56 +03:00
parent 2ddf161314
commit a6002c4622
10 changed files with 104 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/.env
View File

@@ -11,4 +11,4 @@ PB_DOCS_URL = "https://pocketbase.io/docs"
PB_JS_SDK_URL = "https://github.com/pocketbase/js-sdk"
PB_DART_SDK_URL = "https://github.com/pocketbase/dart-sdk"
PB_RELEASES = "https://github.com/pocketbase/pocketbase/releases"
PB_VERSION = "v0.37.3"
PB_VERSION = "v0.37.4-dev"

14
ui/dist/assets/index-gesvZeL3.js → ui/dist/assets/index-DzC-D-6z.js vendored
View File

File diff suppressed because one or more lines are too long

2
ui/dist/assets/index-DNEbN4Hj.css → ui/dist/assets/index-h3OAAQQg.css vendored
View File

File diff suppressed because one or more lines are too long

4
ui/dist/index.html vendored
View File

@@ -13,9 +13,9 @@
<!-- prism -->
<script src="./libs/prism/prism.js" data-manual></script>
<script type="module" crossorigin src="./assets/index-gesvZeL3.js"></script>
<script type="module" crossorigin src="./assets/index-DzC-D-6z.js"></script>
<link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
<link rel="stylesheet" crossorigin href="./assets/index-DNEbN4Hj.css">
<link rel="stylesheet" crossorigin href="./assets/index-h3OAAQQg.css">
</head>
<body>
</body>

6
ui/src/css/recordFields.css
View File

@@ -196,12 +196,6 @@
}
}
.record-field-input {
.record-summary {
animation: fadeIn var(--animationSpeed);
}
}
.field-type-bool {
&.record-field-view .label {
min-width: 48px;

59
ui/src/fields/relation/input.js
View File

@@ -36,34 +36,51 @@ export function input(props) {
return;
}
try {
const fieldCollection = app.store.collections.find((c) => c.id == props.field.collectionId);
const resultRecords = [];
const idsToLoad = [];
// eagerly expand first level presentable relations (if any and the collections are loaded)
const relExpands = [];
const presentableRelationFields = fieldCollection?.fields?.filter(
(f) => !f.hidden && f.presentable && f.type == "relation",
) || [];
for (const field of presentableRelationFields) {
relExpands.push(field.name);
// check for preloaded expand
const expanded = app.utils.toArray(props.record.expand?.[props.field.name]);
for (const id of ids) {
const found = expanded.find((r) => r.id == id);
if (found) {
resultRecords.push(found);
} else {
idsToLoad.push(id);
}
}
const records = await app.pb.collection(props.field.collectionId).getFullList({
requestKey: null,
filter: ids.map((id) => app.pb.filter("id={:id}", { id })).join("||"),
expand: relExpands.join(",") || undefined,
});
try {
if (idsToLoad.length) {
const fieldCollection = app.store.collections.find((c) => c.id == props.field.collectionId);
// preserve the original order
const orderedRecords = [];
for (let id of ids) {
const record = records.find((r) => r.id == id);
if (record) {
orderedRecords.push(record);
// eagerly expand first level presentable relations (if any and the collections are loaded)
const relExpands = [];
const presentableRelationFields = fieldCollection?.fields?.filter(
(f) => !f.hidden && f.presentable && f.type == "relation",
) || [];
for (const field of presentableRelationFields) {
relExpands.push(field.name);
}
const records = await app.pb.collection(props.field.collectionId).getFullList({
requestKey: null,
filter: idsToLoad.map((id) => app.pb.filter("id={:id}", { id })).join("||"),
expand: relExpands.join(",") || undefined,
});
// preserve the original order
for (const id of idsToLoad) {
const found = records.find((r) => r.id == id);
if (found) {
resultRecords.push(found);
} else {
console.warn("missing relation id:", id);
}
}
}
local.selected = orderedRecords;
local.selected = resultRecords;
local.isLoading = false;
} catch (err) {
if (!err.isAbort) {

89
ui/src/records/recordUpsertModal.js
View File

@@ -193,36 +193,67 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
data.record = draftClone;
}
let draftWatcher;
function initDraftWatcher() {
data.initialDraft = getDraft();
draftWatcher?.unwatch();
draftWatcher = watch(() => data.recordHash, (newVal, oldVal) => {
if (typeof oldVal == "undefined") {
return;
}
if (data.hasChanges) {
saveDraft(data.recordHash);
} else {
deleteDraft();
}
});
}
async function initRecord(rawRecord) {
data.isLoading = true;
const recordId = typeof rawRecord == "string" ? rawRecord : rawRecord?.id;
draftWatcher?.unwatch();
// normalize rawRecord (could be plain id string)
rawRecord = app.utils.isObject(rawRecord) ? rawRecord : { id: rawRecord || "" };
// new record
if (!recordId) {
const record = app.utils.isObject(rawRecord) ? JSON.parse(JSON.stringify(rawRecord)) : {};
data.originalRecord = app.utils.emptyClone(record, ["collectionId", "collectionName"]);
data.initialDraft = getDraft();
data.record = record;
if (!rawRecord.id) {
data.originalRecord = JSON.parse(JSON.stringify(rawRecord));
data.record = JSON.parse(JSON.stringify(rawRecord));
data.isLoading = false;
data.isLocked = false;
initDraftWatcher();
return;
}
data.isLocked = !!app.store.settings?.meta?.hideControls;
try {
// eagerly load to allow elements to show their "update" UI and minimize flickering
data.originalRecord = { id: recordId };
data.isLocked = !!app.store.settings?.meta?.hideControls;
const record = await app.pb.collection(collection.name).getOne(recordId, {
requestKey: "upsert_load_" + recordId,
// preload to minimize content jumps
data.originalRecord = JSON.parse(JSON.stringify(rawRecord));
data.record = JSON.parse(JSON.stringify(rawRecord));
// fetch to ensure that the main record fields are up-to-date
let record = await app.pb.collection(collection.name).getOne(rawRecord.id, {
requestKey: "upsert_load_" + rawRecord.id,
});
data.originalRecord = record;
data.initialDraft = getDraft();
data.record = JSON.parse(JSON.stringify(record));
// preload existing expands (if any)
if (rawRecord.expand) {
record.expand = JSON.parse(JSON.stringify(rawRecord.expand));
}
// extend, not overwrite, to prevent reseting the reference passed down to the inputs
Object.assign(data.originalRecord, JSON.parse(JSON.stringify(record)));
Object.assign(data.record, JSON.parse(JSON.stringify(record)));
data.isLoading = false;
initDraftWatcher();
} catch (err) {
if (!err?.isAbort) {
app.checkApiError(err);
@@ -297,12 +328,12 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
data.originalRecord = structuredClone(record);
data.record = structuredClone(record);
} else {
// don't overwrite to prevent loosing the reference passed down to the inputs
// extend, not overwrite, to prevent reseting the reference passed down to the inputs
Object.assign(data.originalRecord, structuredClone(record));
Object.assign(data.record, structuredClone(record));
}
modalSettings.onsave?.(structuredClone(record), isNew);
modalSettings.onsave?.(record, isNew);
// reset all errors
app.store.errors = null;
@@ -360,8 +391,6 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
initRecord(clone);
}
const watchers = [];
function mainTab() {
return [
t.div(
@@ -605,31 +634,12 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
onbeforeopen: () => {
initRecord(rawRecord);
watchers.push(
watch(() => data.recordHash, (newHash, oldHash) => {
if (!oldHash || !newHash || newHash == "{}" || oldHash == "{}") {
return;
}
saveDraft(newHash);
}),
);
return modalSettings.onbeforeopen?.(el);
},
onafteropen: (el) => {
modalSettings.onafteropen?.(el);
},
onbeforeclose: (el, forceClosed) => {
if (
// there are no unsaved changes
!data.hasChanges
// the form has been edited
&& data.initialDraftHash != getDraftHash()
) {
deleteDraft();
}
if (forceClosed) {
return modalSettings.onbeforeclose?.(el);
}
@@ -656,11 +666,10 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
},
onafterclose: (el) => {
modalSettings.onafterclose?.(el);
watchers.forEach((w) => w?.unwatch());
el?.remove();
},
onunmount: () => {
watchers.forEach((w) => w?.unwatch());
draftWatcher?.unwatch();
},
},
t.header(

4
ui/src/records/recordsList.js
View File

@@ -94,9 +94,9 @@ window.app.components.recordsList = function(propsArg = {}) {
// eagerly expand first level relations
// (to prevent too many relation queries)
const relExpands = [];
const relationFields = props.collection.fields.filter(
const relationFields = props.collection.fields?.filter(
(f) => !f.hidden && f.type == "relation",
);
) || [];
for (const field of relationFields) {
relExpands.push(field.name);
}

2
ui/src/utils.js
View File

@@ -348,6 +348,8 @@ const utils = {
clone[prop] = "";
} else if (typeof clone[prop] == "number") {
clone[prop] = 0;
} else if (typeof clone[prop] == "boolean") {
clone[prop] = false;
} else if (Array.isArray(clone[prop])) {
clone[prop] = [];
} else if (app.utils.isObject(clone[prop])) {