fix(LoadingIndicator): fix loading view stays forever

Author: mfal

apps/remote-dom-demo/src/app/_components/LoadingMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  Heading,
+  IllustratedMessage,
+  LoadingSpinner,
+} from "@mittwald/flow-react-components";
+
+export const LoadingMessage = () => (
+  <IllustratedMessage>
+    <LoadingSpinner />
+    <Heading>Lade Demo</Heading>
+  </IllustratedMessage>
+);

apps/remote-dom-demo/src/app/host/layout.tsx

@@ -1,10 +1,6 @@
 "use client";
+import { LoadingMessage } from "@/app/_components/LoadingMessage";
 import { getHostPath, getRemotePath } from "@/app/_lib/navigation";
-import {
-  Heading,
-  IllustratedMessage,
-  LoadingSpinner,
-} from "@mittwald/flow-react-components";
 import { RemoteRenderer } from "@mittwald/flow-remote-react-renderer";
 import { usePathname, useRouter } from "next/navigation";
 import { useRef, useState } from "react";
@@ -18,12 +14,7 @@ export default function HostPage() {
 
   return (
     <>
-      {isNavigating && (
-        <IllustratedMessage>
-          <LoadingSpinner />
-          <Heading>Lade Demo</Heading>
-        </IllustratedMessage>
-      )}
+      {isNavigating && <LoadingMessage />}
       <RemoteRenderer
         onNavigationStateChanged={(state) => {
           const { pathname, isPending } = state;

apps/remote-dom-demo/src/app/layout.tsx

@@ -1,10 +1,7 @@
 "use client";
 import {
   HeaderNavigation,
-  Heading,
-  IllustratedMessage,
   Link,
-  LoadingSpinner,
   Notification,
   NotificationProvider,
   Render,
@@ -19,6 +16,7 @@ import { ErrorBoundary } from "next/dist/client/components/error-boundary";
 import { type PropsWithChildren, Suspense } from "react";
 import styles from "./layout.module.css";
 import { TunnelExit } from "@mittwald/react-tunnel";
+import { LoadingMessage } from "@/app/_components/LoadingMessage";
 
 const Error: ErrorComponent = (props) => {
   return <>REMOTE RENDER ERROR: {props.error.message}</>;
@@ -77,14 +75,7 @@ export default function Layout(props: PropsWithChildren) {
               <main>
                 <div>
                   <ErrorBoundary errorComponent={Error}>
-                    <Suspense
-                      fallback={
-                        <IllustratedMessage>
-                          <LoadingSpinner />
-                          <Heading>Lade Demo</Heading>
-                        </IllustratedMessage>
-                      }
-                    >
+                    <Suspense fallback={<LoadingMessage />}>
                       {props.children}
                     </Suspense>
                   </ErrorBoundary>

apps/remote-dom-demo/src/app/remote/mstudio-loading/page.tsx

@@ -2,22 +2,27 @@
 
 import { Heading, Section, Text } from "@mittwald/flow-remote-react-components";
 import { LoadingIndicator } from "@mittwald/mstudio-ext-react-components";
-import { useState } from "react";
-import { useTimeout } from "usehooks-ts";
+import { useEffect, useState } from "react";
 
 export default function Page() {
-  const [loading, setIsLoading] = useState(true);
-  const hideLoading = () => {
-    setIsLoading(false);
-  };
-  useTimeout(hideLoading, 3000);
-  console.log("Is loading?", loading);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIsReady((r) => {
+        console.log("App is ready?", !r);
+        return !r;
+      });
+    }, 5000);
+
+    return () => clearInterval(timer);
+  }, []);
 
   return (
     <Section>
       <Heading>Demo</Heading>
       <Text>Some text</Text>
-      <LoadingIndicator show={loading} />
+      <LoadingIndicator show={!isReady} />
     </Section>
   );
 }

packages/components/src/components/SuspenseTrigger/SuspenseTrigger.tsx

@@ -12,7 +12,6 @@ const nonResolvingPromise = new Promise<{ default: ComponentType<unknown> }>(
 
 const NonResolvingLazy = lazy(() => nonResolvingPromise);
 
-/** @flr-generate all */
 export const SuspenseTrigger: FC<SuspenseTriggerProps> = (props) => {
   const { show = true } = props;
   return show ? <NonResolvingLazy /> : null;

packages/components/src/views/SuspenseTriggerView.tsx

@@ -1,4 +1,4 @@
 export * from "./Title";
 export * from "./Actions";
 export * from "./Breadcrumb";
-export { SuspenseTrigger as LoadingIndicator } from "@mittwald/flow-remote-react-components";
+export { LoadingFallbackTrigger as LoadingIndicator } from "@mittwald/flow-remote-react-components";

packages/mstudio-ext-react-components/src/components/index.ts

@@ -15,6 +15,7 @@ interface Options {
   connection: RemoteConnection;
   iframe: HTMLIFrameElement;
   onReady?: (connection: HostToRemoteConnection) => void;
+  onLoadingChanged?: (isLoading: boolean) => void;
   onError?: (error: string) => void;
   onNavigationStateChanged?: (state: NavigationState) => void;
   extBridgeImplementation?: ExtBridgeConnectionApi;
@@ -25,6 +26,7 @@ export const connectRemoteIframe = (opts: Options): HostToRemoteConnection => {
     connection,
     iframe,
     onReady,
+    onLoadingChanged,
     onError,
     onNavigationStateChanged,
     extBridgeImplementation = emptyImplementation,
@@ -39,6 +41,9 @@ export const connectRemoteIframe = (opts: Options): HostToRemoteConnection => {
           result.version = version;
           onReady?.(result);
         },
+        setIsLoading: async (isLoading: boolean) => {
+          onLoadingChanged?.(isLoading);
+        },
         setError: async (error: string) => {
           onError?.(error);
         },

packages/remote-core/src/connection/connectRemoteIframe.ts

@@ -9,6 +9,7 @@ export interface NavigationState {
 
 export interface HostExports extends ExtBridgeConnectionApi {
   setIsReady: (version?: Version) => Promise<void>;
+  setIsLoading: (isLoading: boolean) => Promise<void>;
   setError: (error: string) => Promise<void>;
   setNavigationState: (state: NavigationState) => Promise<void>;
 }