Browse Source

Hide loading screen only after JS loaded

Arnaud Vergnet 2 years ago
parent
commit
b15b200846
2 changed files with 40 additions and 18 deletions
  1. 11
    2
      src/components/Screens/PlanexWebview.tsx
  2. 29
    16
      src/screens/Planex/PlanexScreen.tsx

+ 11
- 2
src/components/Screens/PlanexWebview.tsx View File

@@ -67,6 +67,14 @@ calendar.option({
67 67
   }
68 68
 });`;
69 69
 
70
+export const JS_LOADED_MESSAGE = '1';
71
+
72
+const NOTIFY_JS_INJECTED = `
73
+function notifyJsInjected() {
74
+  window.ReactNativeWebView.postMessage('${JS_LOADED_MESSAGE}');
75
+}
76
+`;
77
+
70 78
 // Mobile friendly CSS
71 79
 const CUSTOM_CSS =
72 80
   '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 = (
93 101
   let customInjectedJS = `$(document).ready(function() {
94 102
       ${OBSERVE_MUTATIONS_INJECTED}
95 103
       ${INJECT_STYLE}
96
-      ${FULL_CALENDAR_SETTINGS}`;
104
+      ${FULL_CALENDAR_SETTINGS}
105
+      ${NOTIFY_JS_INJECTED}`;
97 106
   if (group) {
98 107
     customInjectedJS += `displayAde(${group.id});`;
99 108
   }
@@ -103,7 +112,7 @@ const generateInjectedJS = (
103 112
   if (darkMode) {
104 113
     customInjectedJS += INJECT_STYLE_DARK;
105 114
   }
106
-  customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
115
+  customInjectedJS += `notifyJsInjected();});true;`; // Prevents crash on ios
107 116
   return customInjectedJS;
108 117
 };
109 118
 

+ 29
- 16
src/screens/Planex/PlanexScreen.tsx View File

@@ -31,7 +31,9 @@ import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
31 31
 import MascotPopup from '../../components/Mascot/MascotPopup';
32 32
 import { getPrettierPlanexGroupName } from '../../utils/Utils';
33 33
 import GENERAL_STYLES from '../../constants/Styles';
34
-import PlanexWebview from '../../components/Screens/PlanexWebview';
34
+import PlanexWebview, {
35
+  JS_LOADED_MESSAGE,
36
+} from '../../components/Screens/PlanexWebview';
35 37
 import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
36 38
 import {
37 39
   getPreferenceString,
@@ -39,6 +41,7 @@ import {
39 41
   PlanexPreferenceKeys,
40 42
 } from '../../utils/asyncStorage';
41 43
 import { usePlanexPreferences } from '../../context/preferencesContext';
44
+import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
42 45
 
43 46
 const styles = StyleSheet.create({
44 47
   container: {
@@ -65,6 +68,7 @@ function PlanexScreen() {
65 68
       }
66 69
   >();
67 70
   const [injectJS, setInjectJS] = useState('');
71
+  const [loading, setLoading] = useState(true);
68 72
 
69 73
   const getCurrentGroup: () => PlanexGroupType | undefined = useCallback(() => {
70 74
     let currentGroupString = getPreferenceString(
@@ -132,22 +136,26 @@ function PlanexScreen() {
132 136
    * @param event
133 137
    */
134 138
   const onMessage = (event: { nativeEvent: { data: string } }) => {
135
-    const data: {
136
-      start: string;
137
-      end: string;
138
-      title: string;
139
-      color: string;
140
-    } = JSON.parse(event.nativeEvent.data);
141
-    const startDate = dateToString(new Date(data.start), true);
142
-    const endDate = dateToString(new Date(data.end), true);
143
-    const startString = getTimeOnlyString(startDate);
144
-    const endString = getTimeOnlyString(endDate);
145
-
146
-    let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
147
-    if (startString != null && endString != null) {
148
-      msg += `${startString} - ${endString}`;
139
+    if (event.nativeEvent.data === JS_LOADED_MESSAGE) {
140
+      setLoading(false);
141
+    } else {
142
+      const data: {
143
+        start: string;
144
+        end: string;
145
+        title: string;
146
+        color: string;
147
+      } = JSON.parse(event.nativeEvent.data);
148
+      const startDate = dateToString(new Date(data.start), true);
149
+      const endDate = dateToString(new Date(data.end), true);
150
+      const startString = getTimeOnlyString(startDate);
151
+      const endString = getTimeOnlyString(endDate);
152
+
153
+      let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
154
+      if (startString != null && endString != null) {
155
+        msg += `${startString} - ${endString}`;
156
+      }
157
+      showDialog(data.title, msg, data.color);
149 158
     }
150
-    showDialog(data.title, msg, data.color);
151 159
   };
152 160
 
153 161
   /**
@@ -202,6 +210,11 @@ function PlanexScreen() {
202 210
           <View style={GENERAL_STYLES.flex}>{getWebView()}</View>
203 211
         )}
204 212
       </View>
213
+      {loading ? (
214
+        <View style={styles.container}>
215
+          <BasicLoadingScreen />
216
+        </View>
217
+      ) : null}
205 218
       {showMascot ? (
206 219
         <MascotPopup
207 220
           title={i18n.t('screens.planex.mascotDialog.title')}

Loading…
Cancel
Save