Get suspense working and cleanup TL system

src/components/Sidebar/Device/Index.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 
 import { Disclosure } from '@headlessui/react';
 import {
@@ -12,16 +12,16 @@ import type {
   ISerialConnection,
 } from '@meshtastic/meshtasticjs';
 
-import type { languageTemplate } from '../../../App';
+import { TranslationContext } from '../../../translations/TranslationContext';
 import Settings from './Settings';
 
 interface DeviceProps {
   isReady: boolean;
   connection: ISerialConnection | IHTTPConnection | IBLEConnection;
-  translations: languageTemplate;
 }
 
 const Device = (props: DeviceProps): JSX.Element => {
+  const { translations } = React.useContext(TranslationContext);
   return (
     <Disclosure>
       {({ open }) => (
@@ -34,18 +34,23 @@ const Device = (props: DeviceProps): JSX.Element => {
                 <ChevronRightIcon className="my-auto w-5 h-5 mr-2" />
               )}
               <AdjustmentsIcon className="text-gray-600 my-auto mr-2 w-5 h-5" />
-              {props.translations.device_settings_title}
+              {translations.device_settings_title}
             </div>
           </Disclosure.Button>
           <Disclosure.Panel>
             <>
-              <Suspense fallback={<div>loading</div>}>
+              <React.Suspense
+                fallback={
+                  <div className="flex border-b border-gray-300">
+                    <div className="m-auto p-3 text-gray-500">Loading...</div>
+                  </div>
+                }
+              >
                 <Settings
                   connection={props.connection}
                   isReady={props.isReady}
-                  translations={props.translations}
                 />
-              </Suspense>
+              </React.Suspense>
             </>
           </Disclosure.Panel>
         </>