feat(STATFLO-1093): adjustments will preparing demo

docs/public/index.html

@@ -7,10 +7,9 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Statflo's widget playground"
     />
     <link rel="stylesheet" href="https://cdn.statflo.com/brandon/brandon.css" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

docs/public/manifest.json

@@ -1,21 +1,11 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Widget Playground",
+  "name": "Widget Playground",
   "icons": [
     {
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

docs/src/components/RemoteComponent.tsx

@@ -5,6 +5,7 @@ import { UseBoundStore } from "zustand/react";
 import { Mutate, StoreApi } from "zustand/vanilla";
 
 import { Widget, WidgetState } from "@statflo/widget-sdk";
+import usePublishMainWidgetEvents from "../hooks/usePublishMainWidgetEvents";
 
 type WidgetProps = {
   widget: Widget;
@@ -42,6 +43,8 @@ export const RemoteComponent: FC<WidgetProps> = ({
   const events = store((state) => state.events);
   const [loading, setLoading] = useState(true);
 
+  usePublishMainWidgetEvents(loading);
+
   const onLoad = (e: any) => {
     // Populate Iframe widgets with any events they may have missed before loading
     const iframe = document.getElementById(widget.id) as HTMLIFrameElement;