feat: support react-router fallbackElement and loading example

examples/with-fallback-element/ice.config.mts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig(() => ({
+  ssg: false,
+}));

examples/with-fallback-element/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@ice/example-with-fallback-element",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Example demonstrating custom fallbackElement configuration in app.tsx",
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@ice/runtime": "workspace:*"
+  },
+  "devDependencies": {
+    "@ice/app": "workspace:*",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  }
+}

examples/with-fallback-element/src/app.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defineAppConfig } from 'ice';
+
+// Custom fallback element.
+const CustomFallback = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      fontSize: '18px',
+      color: '#666',
+    }}
+  >
+    <div>
+      <div>🔄 Loading...</div>
+      <div style={{ fontSize: '14px', marginTop: '8px' }}>
+        Custom fallback element from app.tsx configuration
+      </div>
+    </div>
+  </div>
+);
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+  router: {
+    type: 'hash',
+    fallbackElement: <CustomFallback />,
+  },
+});

examples/with-fallback-element/src/pages/home.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <div>
+      <h2 style={{ textAlign: 'center', padding: '20px' }}>
+        Home Page
+      </h2>
+      <div style={{ textAlign: 'center' }}>
+        Welcome to the Home Page!
+      </div>
+    </div>
+  );
+}

examples/with-fallback-element/src/pages/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from 'ice';
+
+export default function Home() {
+  return (
+    <div>
+      <h2 style={{ textAlign: 'center', padding: '20px' }}>
+        Test Page
+      </h2>
+      <div style={{ textAlign: 'center' }}>
+        <Link to="/home">Go to Home Page</Link>
+      </div>
+    </div>
+  );
+}

examples/with-fallback-element/src/pages/layout.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useNavigation, Outlet } from 'ice';
+
+export default function Home() {
+  const navigation = useNavigation();
+  // Use navigation state to determine loading status, and show loading indicator.
+  const isLoading = navigation.state === 'loading';
+  return (
+    <div>
+      {isLoading && (<div>loading</div>)}
+      <Outlet />
+    </div>
+  );
+}

packages/runtime/src/ClientRouter.tsx

@@ -25,7 +25,7 @@ function createRouterHistory(history: History, router: Router) {
 let router: Router = null;
 function ClientRouter(props: ClientAppRouterProps) {
   const { Component, routerContext } = props;
-  const { revalidate } = useAppContext();
+  const { revalidate, appConfig } = useAppContext();
 
   function clearRouter() {
     if (router) {
@@ -57,7 +57,8 @@ function ClientRouter(props: ClientAppRouterProps) {
 
   let element: React.ReactNode;
   if (process.env.ICE_CORE_ROUTER === 'true') {
-    element = <RouterProvider router={router} fallbackElement={null} />;
+    const fallbackElement = appConfig?.router?.fallbackElement ?? null;
+    element = <RouterProvider router={router} fallbackElement={fallbackElement} />;
   } else {
     element = <Component />;
   }

packages/runtime/src/appConfig.ts

@@ -7,6 +7,7 @@ const defaultAppConfig: AppConfig = {
   },
   router: {
     type: 'browser',
+    fallbackElement: null,
   },
 };
 

packages/runtime/src/types.ts

@@ -69,6 +69,7 @@ export interface AppConfig {
     type?: 'hash' | 'browser' | 'memory';
     basename?: string;
     initialEntries?: InitialEntry[];
+    fallbackElement?: React.ReactNode;
   };
 }
 

packages/runtime/tests/appConfig.test.ts

@@ -17,6 +17,7 @@ describe('AppConfig', () => {
         strict: false,
       },
       router: {
+        fallbackElement: null,
         type: 'browser',
       },
     });