Relation widget slow on initial load #4635
Description
Describe the bug
We're using the relations widget to select authors for articles. This was fine to begin with. However, as the number of authors increased the load time increased drastically.
From other issues I understand that each a request is sent for each file and those should be cached after the initial load. However, our authors typically open this widget once.
Number of authors in collection: ~200
To Reproduce
Assuming the collections exist and one of the collections have relation to another collection
- Create a new item (or select an existing one)
- Click the dropdown
Expected behavior
Faster load time. A couple of seconds for example.
A possible solution could be that the search functionally limited the number of requests.
Applicable Versions:
- Netlify CMS version: 2.13.3
- Browser version: Latest chrome and firefox
CMS configuration
collections:
- name: post_javascript
label: 'Post: JavaScript'
folder: post/javascript
create: true
summary: '{{post_year}}/{{post_day}}: {{title}}'
fields:
- { label: 'Calendar', name: 'calendar', widget: 'hidden', default: 'javascript' }
- {
label: 'Year',
name: 'post_year',
widget: 'number',
default: 2020,
valueType: 'int',
min: 2018,
max: 2021,
}
- {
label: 'Day',
name: 'post_day',
widget: 'number',
default: 1,
valueType: 'int',
min: 1,
max: 24,
}
- { name: title, label: Title }
- { name: image, label: 'Link to image', required: false }
- { name: ingress, label: 'Ingress', widget: markdown, required: false }
- { name: description, label: 'SEO Description', widget: text, required: false }
- { name: body, label: Body, widget: markdown }
- name: links
label: 'Relevant links'
widget: list
fields:
- { name: title, label: Title }
- { name: url, label: Url }
- name: authors
label: 'Authors'
widget: list
field:
{
label: 'Author',
name: 'author',
widget: 'relation',
collection: 'authors',
searchFields: ['title'],
valueField: 'title',
displayFields: ['title'],
- name: authors
label: Authors
folder: authors
create: true
fields:
- { name: title, label: Name }
- {
name: socialMediaLink,
label: 'Link to social media (twitter, linkedin etc.)',
required: false,
}
- { name: 'company', label: 'Company', default: 'Bekk' }