coding-coding-coding
diff --git a/‎src/ui/popup/components/loader/index.tsx‎
Lines changed: 22 additions & 2 deletions b/‎src/ui/popup/components/loader/index.tsx‎
Lines changed: 22 additions & 2 deletions
diff --git a/‎src/ui/popup/components/loader/style.less‎
Lines changed: 4 additions & 0 deletions b/‎src/ui/popup/components/loader/style.less‎
Lines changed: 4 additions & 0 deletions
@@ -1,17 +1,34 @@
 import {m} from 'malevic';
 import {getLocalMessage} from '../../../../utils/locales';
 import {withState, useState} from 'malevic/state';
+import {getContext} from 'malevic/dom';
 
 interface LoaderProps {
     complete: boolean;
 }
 
 interface LoaderState {
     finished: boolean;
+    errorOccured: boolean;
 }
 
 function Loader({complete = false}: LoaderProps) {
-    const {state, setState} = useState<LoaderState>({finished: false});
+    const context = getContext();
+    const {state, setState} = useState<LoaderState>({finished: false, errorOccured: false});
+
+    // Add a setTimeout for 3 seconds(in which the UI should be loaded already)
+    // after the 3 seconds show a generic error message that the UI couldn't be loaded.
+    if (!state.errorOccured) {
+        setTimeout(() => {
+            if (!complete) {
+                setState({errorOccured: true});
+                context.refresh();
+            }
+        }, 3000);
+    }
+
+    const labelMessage = state.errorOccured ? "A unknown error has occured, the UI couldn't be loaded" : getLocalMessage('loading_please_wait');
+
     return (
         <div
             class={{
@@ -21,7 +38,10 @@ function Loader({complete = false}: LoaderProps) {
             }}
             ontransitionend={() => setState({finished: true})}
         >
-            <label class="loader__message">{getLocalMessage('loading_please_wait')}</label>
+            <label class={{
+                'loader__message': true,
+                'loader__error': state.errorOccured,
+            }}>{labelMessage}</label>
         </div>
     );
 }
 
@@ -51,6 +51,10 @@
         bottom: @popup-content-height + @popup-content-padding - @size-control-inner - @indent-small;
     }
 
+    &__error {
+        font-size: @size-text-normal; 
+    }
+
     &--complete &__message {
         color: fade(@color-heading, 0%);
         transition: color @loading-fade-duration ease-out;