diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14d78693..0f155d5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Fix a freeze when opening a class tree in authoring mode when `MetadataProvider.filterConstructibleTypes()` returns without any delay.
 - Fix calling `MetadataProvider.canConnect()` with only source and without target when dragging over an element to establish a new link.
 - Fix `flushSync was called from inside a lifecycle method` React warning when calling `centerTo()`, `centerContent()`, `zoomToFit()` on `CanvasApi` from a lifecycle method.
+- Fix labels not loading for element and link type selectors in `VisualAuthoring` dialogs unless already preloaded from the diagram.
 - Use default property editor for entities or relations when `VisualAuthoring.propertyEditor` returns `undefined`.
 - Fix `prepareLabels` option for `SparqlDataProvider` to be applied for `knownElementTypes()`, `knownLinkTypes()`, `elementTypes()`, `linkTypes()`, `propertyTypes()` and `elements`.
 - Fix `SparqlDataProvider.elements()` to always return entities with sorted types.
diff --git a/examples/graphAuthoring.tsx b/examples/graphAuthoring.tsx
index aa1ba294..5c29ca8f 100644
--- a/examples/graphAuthoring.tsx
+++ b/examples/graphAuthoring.tsx
@@ -69,6 +69,13 @@ function GraphAuthoringExample() {
                         ? <Reactodia.FormInputList {...inputProps} valueInput={MultilineTextInput} />
                         : undefined,
                 }}
+                languages={[
+                    {code: 'en', label: 'English'},
+                    {code: 'es', label: 'Español'},
+                    {code: 'fr', label: 'Français'},
+                    {code: 'it', label: 'Italiano'},
+                    {code: 'ja', label: '日本語'},
+                ]}
             />
         </Reactodia.Workspace>
     );
diff --git a/src/forms/elementTypeSelector.tsx b/src/forms/elementTypeSelector.tsx
index 5a910325..6c815a38 100644
--- a/src/forms/elementTypeSelector.tsx
+++ b/src/forms/elementTypeSelector.tsx
@@ -3,7 +3,9 @@ import * as React from 'react';
 
 import { mapAbortedToNull } from '../coreUtils/async';
 import { EventObserver } from '../coreUtils/events';
+import { useObservedProperty } from '../coreUtils/hooks';
 import { Translation } from '../coreUtils/i18n';
+import { useKeyedSyncStore } from '../coreUtils/keyedObserver';
 
 import { PlaceholderEntityType } from '../data/schema';
 import type { ElementModel, ElementTypeIri } from '../data/model';
@@ -14,6 +16,7 @@ import { HtmlSpinner } from '../diagram/spinner';
 
 import type { DataDiagramModel } from '../editor/dataDiagramModel';
 import { EntityElement } from '../editor/dataElements';
+import { subscribeElementTypes } from '../editor/observedElement';
 
 import { ListElementView } from '../widgets/utility/listElementView';
 import { NoSearchResults } from '../widgets/utility/noSearchResults';
@@ -84,13 +87,6 @@ export class ElementTypeSelectorInner extends React.Component<ElementTypeSelecto
     componentDidMount() {
         const {searchStore, workspace: {model}} = this.props;
 
-        this.listener.listen(model.events, 'elementTypeEvent', ({data}) => {
-            const {elementTypes} = this.state;
-            const changeEvent = data.changeData;
-            if (changeEvent && elementTypes && elementTypes.includes(changeEvent.source.id)) {
-                this.forceUpdate();
-            }
-        });
         this.listener.listen(searchStore.events, 'changeValue', ({source}) => {
             if (source.value.length === 0) {
                 // Clear the search
@@ -143,9 +139,7 @@ export class ElementTypeSelectorInner extends React.Component<ElementTypeSelecto
                 elementTypeSet.add(type);
             }
         }
-        const elementTypes = Array.from(elementTypeSet)
-            .sort(makeElementTypeComparatorByLabel(model, t));
-        this.setState({elementTypes});
+        this.setState({elementTypes: Array.from(elementTypeSet)});
     }
 
     private async searchExistingElements(searchString: string) {
@@ -212,20 +206,6 @@ export class ElementTypeSelectorInner extends React.Component<ElementTypeSelecto
         });
     };
 
-    private renderPossibleElementType = (elementType: ElementTypeIri) => {
-        const {workspace: {model, translation: t}} = this.props;
-        const type = model.getElementType(elementType);
-        const label = t.formatLabel(type?.data?.label, elementType, model.language);
-        return (
-            <option key={elementType} value={elementType}>
-                {t.text('visual_authoring.select_entity.entity_type.label', {
-                    type: label,
-                    typeIri: elementType,
-                })}
-            </option>
-        );
-    };
-
     private renderElementTypeSelector() {
         const {elementValue, workspace: {translation: t}} = this.props;
         const {elementTypes, elementTypesState} = this.state;
@@ -249,9 +229,7 @@ export class ElementTypeSelectorInner extends React.Component<ElementTypeSelecto
                             <option value={PlaceholderEntityType} disabled={true}>
                                 {t.text('visual_authoring.select_entity.type.placeholder')}
                             </option>
-                            {
-                                elementTypes.map(this.renderPossibleElementType)
-                            }
+                            <ElementTypeOptions elementTypes={elementTypes} />
                         </select>
                     ) : <div><HtmlSpinner width={20} height={20} /></div>
                 }
@@ -349,12 +327,42 @@ export class ElementTypeSelectorInner extends React.Component<ElementTypeSelecto
     }
 }
 
-function makeElementTypeComparatorByLabel(model: DataDiagramModel, t: Translation) {
+function ElementTypeOptions(props: {
+    elementTypes: readonly ElementTypeIri[];
+}) {
+    const {elementTypes} = props;
+    const {model, translation: t} = useWorkspace();
+
+    const language = useObservedProperty(model.events, 'changeLanguage', () => model.language);
+    useKeyedSyncStore(subscribeElementTypes, elementTypes, model);
+    const sortedTypes = [...elementTypes].sort(
+        makeElementTypeComparatorByLabel(model, t, language)
+    );
+
+    return (
+        <>
+            {sortedTypes.map(elementType => {
+                const type = model.getElementType(elementType);
+                const label = t.formatLabel(type?.data?.label, elementType, language);
+                return (
+                    <option key={elementType} value={elementType}>
+                        {t.text('visual_authoring.select_entity.entity_type.label', {
+                            type: label,
+                            typeIri: elementType,
+                        })}
+                    </option>
+                );
+            })}
+        </>
+    );
+}
+
+function makeElementTypeComparatorByLabel(model: DataDiagramModel, t: Translation, language: string) {
     return (a: ElementTypeIri, b: ElementTypeIri) => {
         const typeA = model.getElementType(a);
         const typeB = model.getElementType(b);
-        const labelA = t.formatLabel(typeA?.data?.label, a, model.language);
-        const labelB = t.formatLabel(typeB?.data?.label, b, model.language);
+        const labelA = t.formatLabel(typeA?.data?.label, a, language);
+        const labelB = t.formatLabel(typeB?.data?.label, b, language);
         return labelA.localeCompare(labelB);
     };
 }
diff --git a/src/forms/input/formInputGroup.tsx b/src/forms/input/formInputGroup.tsx
index 6db74d7e..1df5c5c4 100644
--- a/src/forms/input/formInputGroup.tsx
+++ b/src/forms/input/formInputGroup.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
+import { useObservedProperty } from '../../coreUtils/hooks';
 import { useKeyedSyncStore } from '../../coreUtils/keyedObserver';
-import { useTranslation } from '../../coreUtils/i18n';
 
 import { PropertyTypeIri } from '../../data/model';
 import * as Rdf from '../../data/rdf/rdfModel';
@@ -34,6 +34,7 @@ export function FormInputGroup(props: FormInputGroupProps) {
         className, languages, propertyShapes, extraPropertyShape, propertyValues, onChangeData, resolveInput,
     } = props;
     const {model, translation: t} = useWorkspace();
+    const language = useObservedProperty(model.events, 'changeLanguage', () => model.language);
 
     const propertyIris: PropertyTypeIri[] = Array.from(propertyShapes.keys());
     if (extraPropertyShape) {
@@ -62,7 +63,7 @@ export function FormInputGroup(props: FormInputGroupProps) {
                 ? propertyValues[iri] : undefined;
             labelledProperties.push({
                 iri,
-                label: t.formatLabel(property?.data?.label, iri, model.language),
+                label: t.formatLabel(property?.data?.label, iri, language),
                 shape,
                 values: values ?? [],
             });
@@ -108,7 +109,7 @@ function Property(props: {
     resolveInput: FormInputGroupProps['resolveInput'];
 }) {
     const {iri, label, shape, languages, values, onChange, factory, resolveInput} = props;
-    const t = useTranslation();
+    const {model, translation: t} = useWorkspace();
 
     const updateValues = React.useCallback((updater: FormInputMultiUpdater) => {
         onChange(iri, updater);
@@ -130,7 +131,7 @@ function Property(props: {
             <label
                 title={t.text('visual_authoring.property.title', {
                     property: label,
-                    propertyIri: iri,
+                    propertyIri: model.locale.formatIri(iri),
                 })}>
                 <WithFetchStatus type='propertyType' target={iri}>
                     <span>
diff --git a/src/forms/linkTypeSelector.tsx b/src/forms/linkTypeSelector.tsx
index e2653cf2..f692218d 100644
--- a/src/forms/linkTypeSelector.tsx
+++ b/src/forms/linkTypeSelector.tsx
@@ -1,25 +1,21 @@
 import * as React from 'react';
 
 import { mapAbortedToNull } from '../coreUtils/async';
-import { EventObserver } from '../coreUtils/events';
+import { useObservedProperty } from '../coreUtils/hooks';
 import { Translation } from '../coreUtils/i18n';
+import { useKeyedSyncStore } from '../coreUtils/keyedObserver';
 
+import type { MetadataProvider } from '../data/metadataProvider';
 import { ElementModel, LinkModel, LinkDirection, LinkTypeIri, equalLinks, LinkKey } from '../data/model';
 import { PlaceholderRelationType } from '../data/schema';
 
 import { HtmlSpinner } from '../diagram/spinner';
 
 import type { DataDiagramModel } from '../editor/dataDiagramModel';
-import { EntityElement, LinkType, RelationLink, iterateRelationsOf } from '../editor/dataElements';
+import { EntityElement, RelationLink, iterateRelationsOf } from '../editor/dataElements';
+import { subscribeLinkTypes } from '../editor/observedElement';
 
-import { WorkspaceContext } from '../workspace/workspaceContext';
-
-export interface LinkTypeSelectorProps {
-    link: ExtendedLink;
-    onChange: (link: ExtendedLink) => void;
-    disabled?: boolean;
-    error?: React.ReactNode | null;
-}
+import { useWorkspace, WorkspaceContext } from '../workspace/workspaceContext';
 
 export interface ExtendedLink {
     base: Omit<LinkModel, 'sourceId' | 'targetId'>;
@@ -28,180 +24,137 @@ export interface ExtendedLink {
     direction: LinkDirection;
 }
 
-interface State {
-    linkTypes?: ReadonlyArray<DirectedLinkType>;
-}
-
 interface DirectedLinkType {
+    readonly key: number;
     readonly iri: LinkTypeIri;
     readonly direction: LinkDirection;
 }
 
 const FORM_CLASS = 'reactodia-form';
 
-export class LinkTypeSelector extends React.Component<LinkTypeSelectorProps, State> {
-    static contextType = WorkspaceContext;
-    declare readonly context: WorkspaceContext;
-
-    private readonly listener = new EventObserver();
-    private fetchTypesCancellation = new AbortController();
-
-    constructor(props: LinkTypeSelectorProps) {
-        super(props);
-        this.state = {};
-    }
-
-    private updateAll = () => this.forceUpdate();
-
-    componentDidMount() {
-        void this.fetchPossibleLinkTypes();
-    }
-
-    componentDidUpdate(prevProps: LinkTypeSelectorProps) {
-        const {link} = this.props;
-        if (!(
-            link.source.id === prevProps.link.source.id &&
-            link.target.id === prevProps.link.target.id
-        )) {
-            this.setState({linkTypes: undefined});
-            void this.fetchPossibleLinkTypes();
-        }
-    }
-
-    componentWillUnmount() {
-        this.listener.stopListening();
-        this.fetchTypesCancellation.abort();
-    }
-
-    private async fetchPossibleLinkTypes() {
-        const {model, editor: {metadataProvider}, translation: t} = this.context;
-        const {link} = this.props;
-        if (!metadataProvider) {
-            return;
-        }
-
-        this.fetchTypesCancellation.abort();
-        this.fetchTypesCancellation = new AbortController();
-        const signal = this.fetchTypesCancellation.signal;
-
-        const connections = await mapAbortedToNull(
-            metadataProvider.canConnect(
-                link.source,
-                link.target,
-                undefined,
-                {signal}
-            ),
-            signal
-        );
-        if (connections === null) {
-            return;
-        }
-
-        const inLinkSet = new Set<LinkTypeIri>();
-        const outLinkSet = new Set<LinkTypeIri>();
-        for (const {inLinks, outLinks} of connections) {
-            for (const linkType of inLinks) {
-                inLinkSet.add(linkType);
-            }
-            for (const linkType of outLinks) {
-                outLinkSet.add(linkType);
-            }
-        }
-
-        const dataLinkTypes: DirectedLinkType[] = [];
-        for (const linkType of outLinkSet) {
-            dataLinkTypes.push({iri: linkType, direction: 'out'});
-        }
-        for (const linkType of inLinkSet) {
-            dataLinkTypes.push({iri: linkType, direction: 'in'});
-        }
-        dataLinkTypes.sort(makeLinkTypeComparatorByLabelAndDirection(model, t));
-
-        this.setState({linkTypes: dataLinkTypes});
-        this.listenToLinkLabels(dataLinkTypes.map(type => model.createLinkType(type.iri)));
-    }
-
-    private listenToLinkLabels(linkTypes: ReadonlyArray<LinkType>) {
-        for (const linkType of linkTypes) {
-            this.listener.listen(linkType.events, 'changeData', this.updateAll);
-        }
-    }
-
-    private onChangeType = (e: React.FormEvent<HTMLSelectElement>) => {
-        const {link} = this.props;
-        const index = Number(e.currentTarget.value);
-        const {iri, direction} = this.state.linkTypes![index];
-        const changedLink: ExtendedLink = {
-            ...link,
-            base: {
-                ...link.base,
-                linkTypeId: iri,
+export function LinkTypeSelector(props: {
+    link: ExtendedLink;
+    onChange: (link: ExtendedLink) => void;
+    disabled?: boolean;
+    error?: React.ReactNode | null;
+}) {
+    const {link, onChange, disabled, error} = props;
+    const {editor, translation: t} = useWorkspace();
+
+    const [linkTypes, setLinkTypes] = React.useState<readonly DirectedLinkType[]>();
+    const [fetchState, setFetchState] = React.useState<{ type: 'loading' | 'error'; error?: unknown }>();
+
+    React.useEffect(() => {
+        const controller = new AbortController();
+        setFetchState({type: 'loading'});
+        fetchPossibleLinkTypes({
+            link,
+            metadataProvider: editor.metadataProvider,
+            signal: controller.signal,
+        }).then(
+            linkTypes => {
+                if (!controller.signal.aborted) {
+                    setLinkTypes(linkTypes);
+                    setFetchState(undefined);
+                }
+            },
+            error => {
+                if (!controller.signal.aborted) {
+                    setLinkTypes([]);
+                    setFetchState({type: 'error', error});
+                }
             },
-            direction,
-        };
-        this.props.onChange(changedLink);
-    };
-
-    private renderPossibleLinkType = (
-        {iri, direction}: DirectedLinkType, index: number
-    ) => {
-        const {model, translation: t} = this.context;
-        const {link} = this.props;
-        const data = model.getLinkType(iri);
-        const label = t.formatLabel(data?.data?.label, iri, model.language);
-        let [sourceLabel, targetLabel] = [link.source, link.target].map(element =>
-            model.locale.formatEntityLabel(element, model.language)
         );
-        if (direction === 'in') {
-            [sourceLabel, targetLabel] = [targetLabel, sourceLabel];
+        return () => controller.abort();
+    }, [link.source.id, link.target.id]);
+
+    const selectedType = (linkTypes ?? []).find(({iri, direction}) =>
+        iri === link.base.linkTypeId && direction === link.direction
+    );
+    const onChangeType = (e: React.FormEvent<HTMLSelectElement>) => {
+        const key = Number(e.currentTarget.value);
+        const nextType = linkTypes?.find(linkType => linkType.key === key);
+        if (nextType) {
+            const changedLink: ExtendedLink = {
+                ...link,
+                base: {
+                    ...link.base,
+                    linkTypeId: nextType.iri,
+                },
+                direction: nextType.direction,
+            };
+            onChange(changedLink);
         }
-        return (
-            <option key={index} value={index}>
-                {t.text('visual_authoring.select_relation.relation_type.label', {
-                    relation: label,
-                    source: sourceLabel,
-                    target: targetLabel,
-                })}
-            </option>
-        );
     };
 
-    render() {
-        const {translation: t} = this.context;
-        const {link, disabled, error} = this.props;
-        const {linkTypes} = this.state;
-        const selectedIndex = (linkTypes ?? []).findIndex(({iri, direction}) =>
-            iri === link.base.linkTypeId && direction === link.direction
-        );
-        return (
-            <div className={`${FORM_CLASS}__control-row`}>
-                <label>{t.text('visual_authoring.select_relation.type.label')}</label>
-                {
-                    linkTypes ? (
-                        <select className='reactodia-form-control'
-                            name='reactodia-link-type-selector-select'
-                            value={selectedIndex}
-                            onChange={this.onChangeType}
-                            disabled={disabled}>
-                            <option value={-1} disabled={true}>
-                                {t.text('visual_authoring.select_relation.type.placeholder')}
-                            </option>
-                            {linkTypes.map(this.renderPossibleLinkType)}
-                        </select>
-                    ) : <div><HtmlSpinner width={20} height={20} /></div>
+    return (
+        <div className={`${FORM_CLASS}__control-row`}>
+            <label>{t.text('visual_authoring.select_relation.type.label')}</label>
+            {linkTypes && !fetchState ? (
+                <select className='reactodia-form-control'
+                    name='reactodia-link-type-selector-select'
+                    value={selectedType?.key ?? -1}
+                    onChange={onChangeType}
+                    disabled={disabled}>
+                    <option value={-1} disabled={true}>
+                        {t.text('visual_authoring.select_relation.type.placeholder')}
+                    </option>
+                    <LinkTypeOptions link={link} linkTypes={linkTypes} />
+                </select>
+            ) : (
+                <div>
+                    <HtmlSpinner width={20} height={20} errorOccurred={fetchState?.type === 'error'} />
+                </div>
+            )}
+            {error ? <span className={`${FORM_CLASS}__control-error`}>{error}</span> : null}
+        </div>
+    );
+}
+
+function LinkTypeOptions(props: {
+    link: ExtendedLink;
+    linkTypes: readonly DirectedLinkType[];
+}) {
+    const {link, linkTypes} = props;
+    const {model, translation: t} = useWorkspace();
+
+    const language = useObservedProperty(model.events, 'changeLanguage', () => model.language);
+    useKeyedSyncStore(subscribeLinkTypes, linkTypes.map(type => type.iri), model);
+    const sortedLinkTypes = [...linkTypes].sort(
+        makeLinkTypeComparatorByLabelAndDirection(model, t, language)
+    );
+
+    return (
+        <>
+            {sortedLinkTypes.map(({key, iri, direction}: DirectedLinkType) => {
+                const data = model.getLinkType(iri);
+                const label = t.formatLabel(data?.data?.label, iri, model.language);
+                let [sourceLabel, targetLabel] = [link.source, link.target].map(element =>
+                    model.locale.formatEntityLabel(element, model.language)
+                );
+                if (direction === 'in') {
+                    [sourceLabel, targetLabel] = [targetLabel, sourceLabel];
                 }
-                {error ? <span className={`${FORM_CLASS}__control-error`}>{error}</span> : null}
-            </div>
-        );
-    }
+                return (
+                    <option key={key} value={key}>
+                        {t.text('visual_authoring.select_relation.relation_type.label', {
+                            relation: label,
+                            source: sourceLabel,
+                            target: targetLabel,
+                        })}
+                    </option>
+                );
+            })}
+        </>
+    );
 }
 
-function makeLinkTypeComparatorByLabelAndDirection(model: DataDiagramModel, t: Translation) {
+function makeLinkTypeComparatorByLabelAndDirection(model: DataDiagramModel, t: Translation, language: string) {
     return (a: DirectedLinkType, b: DirectedLinkType) => {
         const aData = model.getLinkType(a.iri);
         const bData = model.getLinkType(b.iri);
-        const labelA = t.formatLabel(aData?.data?.label, a.iri, model.language);
-        const labelB = t.formatLabel(bData?.data?.label, b.iri, model.language);
+        const labelA = t.formatLabel(aData?.data?.label, a.iri, language);
+        const labelB = t.formatLabel(bData?.data?.label, b.iri, language);
         const labelCompareResult = labelA.localeCompare(labelB);
         if (labelCompareResult !== 0) {
             return labelCompareResult;
@@ -216,6 +169,54 @@ function makeLinkTypeComparatorByLabelAndDirection(model: DataDiagramModel, t: T
     };
 }
 
+async function fetchPossibleLinkTypes(params: {
+    link: ExtendedLink;
+    metadataProvider: MetadataProvider | undefined;
+    signal: AbortSignal;
+}): Promise<DirectedLinkType[]> {
+    const {link, metadataProvider, signal} = params;
+    if (!metadataProvider) {
+        return [];
+    }
+
+    const connections = await mapAbortedToNull(
+        metadataProvider.canConnect(
+            link.source,
+            link.target,
+            undefined,
+            {signal}
+        ),
+        signal
+    );
+    if (connections === null) {
+        return [];
+    }
+
+    const inLinkSet = new Set<LinkTypeIri>();
+    const outLinkSet = new Set<LinkTypeIri>();
+    for (const {inLinks, outLinks} of connections) {
+        for (const linkType of inLinks) {
+            inLinkSet.add(linkType);
+        }
+        for (const linkType of outLinks) {
+            outLinkSet.add(linkType);
+        }
+    }
+
+    let nextKey = 1;
+    const dataLinkTypes: DirectedLinkType[] = [];
+    for (const linkType of outLinkSet) {
+        dataLinkTypes.push({key: nextKey, iri: linkType, direction: 'out'});
+        nextKey++;
+    }
+    for (const linkType of inLinkSet) {
+        dataLinkTypes.push({key: nextKey, iri: linkType, direction: 'in'});
+        nextKey++;
+    }
+
+    return dataLinkTypes;
+}
+
 export function dataFromExtendedLink(link: ExtendedLink): LinkModel {
     return {
         ...link.base,