audio output selection in safari blocks the UI

It appears that at the time of this writing, creating audio tracks blocks
the browser's main thread for a long time on safari. Wasn't able to confirm
which part of track creation does the blocking exactly, but not creating
the tracks seems to help and makes the UI much more responsive.

react/features/settings/components/web/audio/AudioSettingsContent.js

 
 import { translate } from '../../../../base/i18n';
 import { IconMicrophoneEmpty, IconVolumeEmpty } from '../../../../base/icons';
+import JitsiMeetJS from '../../../../base/lib-jitsi-meet';
 import { equals } from '../../../../base/redux';
 import { createLocalAudioTracks } from '../../../functions';
 
 import MicrophoneEntry from './MicrophoneEntry';
 import SpeakerEntry from './SpeakerEntry';
 
+const browser = JitsiMeetJS.util.browser;
+
 export type Props = {
 
    /**
      * @returns {void}
      */
     async _setTracks() {
+        if (browser.isSafari()) {
+
+            // It appears that at the time of this writing, creating audio tracks blocks the browser's main thread for
+            // long time on safari. Wasn't able to confirm which part of track creation does the blocking exactly, but
+            // not creating the tracks seems to help and makes the UI much more responsive.
+            return;
+        }
+
         this._disposeTracks(this.state.audioTracks);
 
         const audioTracks = await createLocalAudioTracks(
                     {this.state.audioTracks.map((data, i) =>
                         this._renderMicrophoneEntry(data, i),
                     )}
-                    <AudioSettingsHeader
-                        IconComponent = { IconVolumeEmpty }
-                        text = { t('settings.speakers') } />
+                    { outputDevices.length > 0 && (
+                        <AudioSettingsHeader
+                            IconComponent = { IconVolumeEmpty }
+                            text = { t('settings.speakers') } />)
+                    }
                     {outputDevices.map((data, i) =>
                         this._renderSpeakerEntry(data, i),
                     )}

react/features/settings/components/web/audio/MicrophoneEntry.js

      *
      * @inheritdoc
      */
-    compmonentWillUnmount() {
+    componentWillUnmount() {
         this._stopListening(this.props.jitsiTrack);
     }
 
      * @inheritdoc
      */
     render() {
-        const { children, hasError, isSelected } = this.props;
+        const { children, hasError, isSelected, jitsiTrack } = this.props;
 
         return (
             <div
                     isSelected = { isSelected }>
                     {children}
                 </AudioSettingsEntry>
-                <Meter
+                { Boolean(jitsiTrack) && <Meter
                     className = 'audio-preview-meter-mic'
                     isDisabled = { hasError }
                     level = { this.state.level } />
+                }
             </div>
         );
     }