fix flickering iframe

src/components/Platform.js

@@ -1,3 +1,5 @@
+import React, { useState } from 'react';
+
 import {
   FaPlus, FaForward, FaBackward, FaCloudUploadAlt,
   FaPen, FaSpotify, FaCog, FaSearch, FaTimes
@@ -95,8 +97,14 @@ export function Li(props) {
 }
 
 export function IFrame(props) {
+  const [visibility, setVisibility] = useState('hidden');
+
   return (
     <iframe
+      style={{
+        visibility: visibility
+      }}
+      onLoad={() => setVisibility('visible')}
       title={props.title}
       {...props}
     />

src/components/Platform.native.js

@@ -1,5 +1,5 @@
-import 'react-native-gesture-handler';
 import React, { useCallback, Component, createContext, Children, cloneElement } from 'react';
+import 'react-native-gesture-handler';
 import { Linking, Alert, Image, View as VIEW, ScrollView as SCROLL_VIEW, ActivityIndicator } from 'react-native';
 import { Text as TEXT } from "react-native-elements";
 import { Picker } from '@react-native-picker/picker';

src/components/Playlist.js

@@ -1,21 +1,15 @@
-import React, { useState } from 'react';
 import 'react-native-get-random-values';
 import { v4 as uuidv4 } from 'uuid';
 import { IFrame } from './Platform';
 
 export default function Playlist({ track_ids = [], waypoints = [], playlist_id = '' }) {
   const height = 80 + 50 * track_ids.length;
-  const [visibility, setVisibility] = useState('hidden');
 
   return (
     <IFrame
       title={uuidv4()}
       width='100%'
       height={height}
-      style={{
-        visibility: visibility
-      }}
-      onLoad={() => setVisibility('visible')}
       src={`${process.env.REACT_APP_API_URL}/playlist_widget` +
         `?track_ids=${encodeURIComponent(JSON.stringify(track_ids))}` +
         `&waypoints=${encodeURIComponent(JSON.stringify(waypoints))}` +