Radio app fixes

1 files changed, 22 insertions, 16 deletions

diff --git a/apps/Radio/components/List.js b/apps/Radio/components/List.js
index 73e1523..6f24df6 100644
--- a/apps/Radio/components/List.js
+++ b/apps/Radio/components/List.js
@@ -2,6 +2,7 @@ import { open } from 'helpers/windowActions'
 import appList from 'configs/appList'
 import useApps from 'hooks/useApps'
 import fetchJson from 'helpers/fetchJson'
+import { Splash } from 'components'
 import styles from '../styles/Radio.module.scss'
 
 const play = async (title, station, apps, setApps, enqueue) => {
@@ -23,23 +24,28 @@ const List = ({ results, enqueue }) => {
   return (
     <div className={styles.list}>
       <div>
-        {results && results.length === 0 && <div>No results</div>}
-        {results && results.length > 0 && (
-          results.map(({ title, url, logo, genres, locations }) => (
-            <div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
-              <img width={75} height={75} src={logo} loading="lazy" alt="title" />
-              <div>
-                <span>{ title }</span>
-                <div>
-                  <span>{locations.join(', ')}</span>
-                  <div>
-                    {genres.map(g => <span>{g}</span>)}
+        {results === 'loading'
+          ? <Splash />
+          : <>
+              {results && results.length === 0 && <div>{t('radio_no_result')}</div>}
+              {results && results.length > 0 && (
+                results.map(({ title, url, logo, genres, locations }) => (
+                  <div key={url} onClick={() => play(title, url, apps, setApps, enqueue)}>
+                    <img width={75} height={75} src={logo} loading="lazy" alt="title" />
+                    <div>
+                      <span>{ title }</span>
+                      <div>
+                        <span>{locations.join(', ')}</span>
+                        <div>
+                          {genres.map(g => <span>{g}</span>)}
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            </div>
-          ))
-        )}
+                ))
+              )}
+          </>
+        }
       </div>
     </div>
   )