Hide loading screen only after JS loaded

src/components/Screens/PlanexWebview.tsx

@@ -67,6 +67,14 @@ calendar.option({
   }
 });`;
 
+export const JS_LOADED_MESSAGE = '1';
+
+const NOTIFY_JS_INJECTED = `
+function notifyJsInjected() {
+  window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}');
+}
+`;
+
 // Mobile friendly CSS
 const CUSTOM_CSS =
   'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
@@ -93,7 +101,8 @@ const generateInjectedJS = (
   let customInjectedJS = `$(document).ready(function() {
       ${OBSERVE_MUTATIONS_INJECTED}
       ${INJECT_STYLE}
-      ${FULL_CALENDAR_SETTINGS}`;
+      ${FULL_CALENDAR_SETTINGS}
+      ${NOTIFY_JS_INJECTED}`;
   if (group) {
     customInjectedJS += `displayAde(${group.id});`;
   }
@@ -103,7 +112,7 @@ const generateInjectedJS = (
   if (darkMode) {
     customInjectedJS += INJECT_STYLE_DARK;
   }
-  customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
+  customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios
   return customInjectedJS;
 };
 

src/screens/Planex/PlanexScreen.tsx

@@ -31,7 +31,9 @@ import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
 import { getPrettierPlanexGroupName } from '../../utils/Utils';
 import GENERAL_STYLES from '../../constants/Styles';
-import PlanexWebview from '../../components/Screens/PlanexWebview';
+import PlanexWebview, {
+  JS_LOADED_MESSAGE,
+} from '../../components/Screens/PlanexWebview';
 import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
 import {
   getPreferenceString,
@@ -39,6 +41,7 @@ import {
   PlanexPreferenceKeys,
 } from '../../utils/asyncStorage';
 import { usePlanexPreferences } from '../../context/preferencesContext';
+import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
 
 const styles = StyleSheet.create({
   container: {
@@ -65,6 +68,7 @@ function PlanexScreen() {
       }
   >();
   const [injectJS, setInjectJS] = useState('');
+  const [loading, setLoading] = useState(true);
 
   const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => {
     let currentGroupString = getPreferenceString(
@@ -132,22 +136,26 @@ function PlanexScreen() {
    * @param event
    */
   const onMessage = (event: { nativeEvent: { data: string } }) => {
-    const data: {
+    if (event.nativeEvent.data === JS_LOADED_MESSAGE) {
-      start: string;
+      setLoading(false);
-      end: string;
+    } else {
-      title: string;
+      const data: {
-      color: string;
+        start: string;
-    } = JSON.parse(event.nativeEvent.data);
+        end: string;
-    const startDate = dateToString(new Date(data.start), true);
+        title: string;
-    const endDate = dateToString(new Date(data.end), true);
+        color: string;
-    const startString = getTimeOnlyString(startDate);
+      } = JSON.parse(event.nativeEvent.data);
-    const endString = getTimeOnlyString(endDate);
+      const startDate = dateToString(new Date(data.start), true);
+      const endDate = dateToString(new Date(data.end), true);
+      const startString = getTimeOnlyString(startDate);
+      const endString = getTimeOnlyString(endDate);
 
-    let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
+      let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
-    if (startString != null && endString != null) {
+      if (startString != null && endString != null) {
-      msg += `${startString} - ${endString}`;
+        msg += `${startString} - ${endString}`;
+      }
+      showDialog(data.title, msg, data.color);
     }
-    showDialog(data.title, msg, data.color);
   };
 
   /**
@@ -202,6 +210,11 @@ function PlanexScreen() {
           <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
         )}
       </View>
+      {loading ? (
+        <View style={styles.container}>
+          <BasicLoadingScreen />
+        </View>
+      ) : null}
       {showMascot ? (
         <MascotPopup
           title={i18n.t('screens.planex.mascotDialog.title')}