fix: background interval

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/modals/main/settings/sections/Message.jsx

@@ -69,7 +69,7 @@ export default class Message extends PureComponent {
           switch={true}
         />
         <SettingsItem
-          title={variables.getMessage('modals.main.settings.sections.message.text')}
+          title={variables.getMessage('modals.main.settings.sections.message.messages')}
           subtitle=""
           final={true}
         >
@@ -91,10 +91,11 @@ export default class Message extends PureComponent {
                   <TextareaAutosize
                     value={this.state.messages[index]}
                     placeholder={variables.getMessage(
-                      'modals.main.settings.sections.message.title',
+                      'modals.main.settings.sections.message.content',
                     )}
                     onChange={(e) => this.message(e, true, index)}
                     varient="outlined"
+                    style={{ padding: "0"}}
                   />
                 </div>
               </div>

src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx

@@ -1,3 +1,29 @@
+import { Suspense, lazy } from 'react';
+const Analog = lazy(() => import('react-clock'));
+
 export default function ClockSkeleton() {
-  return <span className="new-clock clock-container clockSkeleton">10:20</span>;
+  if (localStorage.getItem('timeType') === 'analogue') {
+    return (
+      <Suspense fallback={<></>}>
+          <div className="clockBackground">
+            <Analog
+              className="analogclock clock-container"
+              value={'2022-10-07T17:00:00+00:00'}
+              size={50}
+            />
+          </div>
+        </Suspense>
+    );
+  } else if (localStorage.getItem('timeType') === 'percentageComplete') {
+    return <span className="new-clock clock-container clockSkeleton">68%</span>;
+  } else if (localStorage.getItem('timeType') === 'verticalClock') {
+    return (
+      <span className="new-clock clock-container" style={{ fontSize: '30px' }}>
+        <div className="hour">10</div>
+        <div className="minute">23</div>
+      </span>
+    );
+  } else {
+    return <span className="new-clock clock-container clockSkeleton">10:24</span>;
+  }
 }