MiniApp FinishedLoading implementation

js-miniapp-bridge/src/common-bridge.ts

@@ -735,6 +735,22 @@ export class MiniAppBridge {
     });
   }
 
+  /**
+   * Associating miniAppFinishedLoading function to MiniAppBridge object.
+   * @returns Promise resolve with string
+   * Host app can implement an iterface miniAppFinishedLoading to perform any operations after the miniapp is loaded.
+   */
+  miniAppFinishedLoading() {
+    return new Promise<string>((resolve, reject) => {
+      return this.executor.exec(
+        'miniAppFinishedLoading',
+        {},
+        success => resolve(success),
+        error => reject(error)
+      );
+    });
+  }
+
   /**
    * This will retrieve the list of products details available for In-App Purchases associated with Mini App in the Platform.
    * @returns List of In-app purchase products

js-miniapp-sample/src/pages/landing.js

@@ -10,6 +10,7 @@ import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
 import SettingsApplicationsRoundedIcon from '@mui/icons-material/SettingsApplicationsRounded';
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import SystemUpdateIcon from '@mui/icons-material/SystemUpdate';
+import MobileHostAppIcon from '@mui/icons-material/SendToMobile';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -82,6 +83,7 @@ const useStyles = makeStyles((theme) => ({
 const Landing = (props: LandingProps) => {
   const classes = useStyles();
   const [darkMode, setDarkMode] = useState(false);
+  const [hostNotified, setHostNotified] = useState(false);
 
   useEffect(() => {
     try {
@@ -101,9 +103,19 @@ const Landing = (props: LandingProps) => {
     }
   }, [props]);
 
+  useEffect(() => {
+    try {
+      if (document.readyState === 'complete') {
+        miniAppDidFinishLoad();
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
   function getDarkMode() {
     MiniApp.miniappUtils
-      .isDarkMode()
+      .isDarkModes()
       .then((response) => {
         setDarkMode(response);
       })
@@ -112,6 +124,18 @@ const Landing = (props: LandingProps) => {
       });
   }
 
+  function miniAppDidFinishLoad() {
+    MiniApp.miniappUtils
+      .miniAppFinishedLoading()
+      .then((response) => {
+        console.log(response);
+        setHostNotified(true);
+      })
+      .catch((miniAppError) => {
+        console.log('miniAppFinishedLoading - Error: ', miniAppError);
+      });
+  }
+
   return (
     <CardContent className={classes.content}>
       <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
@@ -223,6 +247,17 @@ const Landing = (props: LandingProps) => {
             secondary={String(props.hostBuildType) || '-'}
           />
         </ListItem>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <MobileHostAppIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary="HostApp Notified For Missing Assets:"
+            secondary={String(hostNotified)}
+          />
+        </ListItem>
         <ListItem>
           <ListItemAvatar>
             <Avatar>

js-miniapp-sdk/src/modules/utils.ts

@@ -22,6 +22,12 @@ export interface MiniAppUtilsProvider {
    */
   closeMiniApp(withConfirmation: boolean): Promise<string>;
 
+  /**
+   * Miniapp can notify the host app that it has finished loading using this call.
+   * Host app can implement this interface to perform any other actions after the miniapp has loaded.
+   */
+  miniAppFinishedLoading(): Promise<string>;
+
   /**
    * Interface that is used to get the Color theme used in the Host application
    */
@@ -44,6 +50,9 @@ export class MiniAppUtils implements MiniAppUtilsProvider {
   closeMiniApp(withConfirmation: boolean): Promise<string> {
     return getBridge().closeMiniApp(withConfirmation);
   }
+  miniAppFinishedLoading(): Promise<string> {
+    return getBridge().miniAppFinishedLoading();
+  }
   setCloseAlert(alertInfo: CloseAlertInfo): Promise<string> {
     return getBridge().setCloseAlert(alertInfo);
   }