make loading less states less obvious

app.json

@@ -11,12 +11,13 @@
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#191A20"
+      "backgroundColor": "#fff"
     },
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.bacon.mdex",
       "infoPlist": {
+        "UIViewControllerBasedStatusBarAppearance": true,
         "ITSAppUsesNonExemptEncryption": false
       }
     },

app/(index,orders,products,analytics)/_layout.native.tsx

@@ -12,6 +12,17 @@ export default function RootLayout({ segment }: { segment: string }) {
   return (
     <Stack
       screenOptions={{
+        headerTransparent: true,
+        headerBlurEffect: "prominent",
+        headerShadowVisible: true,
+        headerLargeTitleShadowVisible: false,
+        headerStyle: {
+          // Hack to ensure the collapsed small header shows the shadow / border.
+          backgroundColor: "rgba(255,255,255,0.01)",
+        },
+        headerLargeStyle: {
+          backgroundColor: PlatformColor("systemGroupedBackgroundColor"), // Color of your background
+        },
         contentStyle: {
           backgroundColor: PlatformColor("systemGroupedBackgroundColor"),
         },
@@ -27,18 +38,6 @@ export default function RootLayout({ segment }: { segment: string }) {
             return <ProfileButton segment={segment} />;
           },
 
-          headerTransparent: true,
-          headerBlurEffect: "prominent",
-          headerShadowVisible: true,
-          headerLargeTitleShadowVisible: false,
-          headerStyle: {
-            // Hack to ensure the collapsed small header shows the shadow / border.
-            backgroundColor: "rgba(255,255,255,0.01)",
-          },
-          headerLargeStyle: {
-            backgroundColor: PlatformColor("systemGroupedBackgroundColor"), // Color of your background
-          },
-
           //
           ...(name !== "index"
             ? {

app/(index,orders,products,analytics)/index.tsx

@@ -23,7 +23,17 @@ export default function IndexRoute() {
         }
       }}
       ref={useScrollRef()}
-      {...extraProps}
+      navigate={router.navigate}
+      dom={{
+        contentInsetAdjustmentBehavior: "automatic",
+        automaticallyAdjustsScrollIndicatorInsets: true,
+        onLoadEnd(event) {
+          // Keep the splash screen open until the DOM content has loaded.
+          setTimeout(() => {
+            SplashScreen.hideAsync();
+          }, 1);
+        },
+      }}
     />
   );
 }
@@ -46,11 +56,4 @@ async function notify() {
     trigger: null,
   });
 }
-
-const extraProps = {
-  navigate: router.navigate,
-  dom: {
-    contentInsetAdjustmentBehavior: "automatic",
-    automaticallyAdjustsScrollIndicatorInsets: true,
-  },
-} as const;
+import * as SplashScreen from "expo-splash-screen";

app/(index,orders,products,analytics)/settings.tsx

@@ -24,7 +24,9 @@ export default function Settings() {
           }
         }}
       />
-      <StatusBar barStyle="light-content" />
+      {process.env.EXPO_OS === "android" && (
+        <StatusBar barStyle="light-content" />
+      )}
     </>
   );
 }

app/_layout.tsx

@@ -3,13 +3,19 @@ import { House, ShoppingCart, Package, LineChart } from "lucide-react-native";
 import * as Haptics from "expo-haptics";
 import { BlurView } from "expo-blur";
 import { StyleSheet } from "react-native";
+import { HapticTab } from "@/components/haptic-tab";
+import * as SplashScreen from "expo-splash-screen";
+
+SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   // TODO: Add tab bar
   if (process.env.EXPO_OS === "web") return <Slot />;
   return (
     <Tabs
       screenOptions={{
+        lazy: false,
+        tabBarButton: HapticTab,
         headerShown: false,
         tabBarActiveTintColor: "rgb(15, 23, 42)",
         tabBarStyle: {
@@ -23,11 +29,6 @@ export default function RootLayout() {
           />
         ),
       }}
-      screenListeners={{
-        tabPress: () => {
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-        },
-      }}
     >
       <Tabs.Screen
         name="(index)"

components/global-button-haptics.tsx

@@ -25,17 +25,19 @@ export function useGlobalButtonHaptics(haptics?: (size: number) => void) {
   useEffect(() => {
     if (!haptics) return;
 
-    const listener = (event: MouseEvent) => {
+    const listener = (event: TouchEvent) => {
       // Check if the clicked element is a button
       if (event.target?.tagName === "BUTTON") {
         haptics(getSizeScale(event.target as HTMLButtonElement));
       }
     };
     // Global event listener for clicks
-    document.addEventListener("click", listener);
+    // document.addEventListener("click", listener);
+    // Global event listener for touch start
+    document.addEventListener("touchstart", listener);
 
     return () => {
-      document.removeEventListener("click", listener);
+      document.removeEventListener("touchstart", listener);
     };
   }, [haptics]);
 

components/haptic-tab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import { PlatformPressable } from "@react-navigation/elements";
+import * as Haptics from "expo-haptics";
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS !== "web") {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

components/mdx/story.mdx

@@ -1,6 +1,6 @@
 # DOM Markdown
 
-![Embedded Image](./sci-fi.jpg)
+![Embedded Image](./sci-fi.avif)
 
 In the year 2473, humanity had long since spread beyond Earth, colonizing planets and moons in distant star systems. Amidst this interstellar expansion, the **ISV Nomad**, a lone exploratory vessel, drifted through the vast void of space, its mission: to investigate the unknown regions at the edge of the Milky Way.
 
@@ -78,7 +78,7 @@ Image cropping with `react-mobile-cropper`.
 import Cropper from "@/components/mdx/mobile-cropper";
 
 <Cropper
-  image={(process.env.EXPO_DOM_BASE_URL || "") + "/placeholder-user.jpg"}
+  image={(process.env.EXPO_DOM_BASE_URL || "") + "/placeholder-user.avif"}
   style={{
     height: 300,
     maxHeight: 300,

components/shad/dashboard.tsx

@@ -48,7 +48,6 @@ import {
   MoreVertical,
   Truck,
 } from "lucide-react";
-import { useEffect } from "react";
 import { useGlobalButtonHaptics } from "../global-button-haptics";
 
 export default function DashboardRoute({

components/shad/settings.tsx

@@ -3,7 +3,6 @@
 import ShadLayout from "./shad-layout";
 import StoryWrapper from "../mdx/mdx-route";
 import { useGlobalButtonHaptics } from "../global-button-haptics";
-// import { useEffect } from "react";
 
 export default function SettingsRoute({
   navigate,
@@ -14,17 +13,18 @@ export default function SettingsRoute({
   onButtonClick: (size: number) => Promise<void>;
 }) {
   useGlobalButtonHaptics(onButtonClick);
-  // useEffect(() => {
-  //   import("eruda").then((eruda) => eruda.default.init());
-  // }, []);
 
   return (
-    <ShadLayout navigate={navigate} select>
-      <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
-        <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
-          <StoryWrapper />
-        </div>
-      </main>
-    </ShadLayout>
+    <>
+      <div className="animate-fade-in">
+        <ShadLayout navigate={navigate} select>
+          <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+            <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
+              <StoryWrapper />
+            </div>
+          </main>
+        </ShadLayout>
+      </div>
+    </>
   );
 }

components/shad/shad-layout.tsx

@@ -53,6 +53,8 @@ export default function ShadLayout({
   }
 
   return (
-    <ShadLayoutFull select={select} navigate={navigate} children={children} />
+    <div className="animate-fade-in">
+      <ShadLayoutFull select={select} navigate={navigate} children={children} />
+    </div>
   );
 }

components/shad/shad-nav.tsx

@@ -251,7 +251,7 @@ export function Header() {
             className="overflow-hidden rounded-full"
           >
             <img
-              src={baseUrl + "/evanbacon.jpg"}
+              src={baseUrl + "/evanbacon.avif"}
               width={36}
               height={36}
               alt="Avatar"

components/touchable-impact.tsx

@@ -7,7 +7,7 @@ export const TouchableImpact = React.forwardRef<
   React.ComponentProps<typeof TouchableBase> & {
     impact?: boolean | Haptics.ImpactFeedbackStyle;
   }
->(({ onPress, onPressIn, impact = true, ...props }, ref) => {
+>(({ onPressIn, impact = true, ...props }, ref) => {
   return (
     <TouchableBase
       ref={ref}
@@ -20,14 +20,6 @@ export const TouchableImpact = React.forwardRef<
         }
         onPressIn?.(...props);
       }}
-      onPress={(...props) => {
-        if (impact && process.env.EXPO_OS !== "web") {
-          Haptics.impactAsync(
-            impact === true ? Haptics.ImpactFeedbackStyle.Light : impact
-          );
-        }
-        onPress?.(...props);
-      }}
       {...props}
     />
   );

package.json

@@ -9,7 +9,8 @@
     "lint": "expo lint",
     "prebuild": "expo prebuild --template ./vendor/expo-template-bare-minimum-51.0.27.tgz",
     "predeploy:web": "expo export -p web",
-    "deploy:web": "netlify deploy --dir dist"
+    "deploy:web": "netlify deploy --dir dist",
+    "prepare": "npx patch-package"
   },
   "dependencies": {
     "@bacons/mdx": "^0.3.8",

patches/react-native-webview+13.8.6.patch

@@ -0,0 +1,43 @@
+diff --git a/node_modules/react-native-webview/apple/RNCWebViewImpl.m b/node_modules/react-native-webview/apple/RNCWebViewImpl.m
+index ed3a81a..7d361e7 100644
+--- a/node_modules/react-native-webview/apple/RNCWebViewImpl.m
++++ b/node_modules/react-native-webview/apple/RNCWebViewImpl.m
+@@ -474,9 +474,12 @@ - (WKWebViewConfiguration *)setUpWkWebViewConfig
+   return wkWebViewConfig;
+ }
+
+-- (void)didMoveToWindow
++- (void)initializeWebView
+ {
+-  if (self.window != nil && _webView == nil) {
++   @synchronized (self) {
++    if (_webView != nil) {
++      return;
++    }
+     WKWebViewConfiguration *wkWebViewConfig = [self setUpWkWebViewConfig];
+     _webView = [[RNCWKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig];
+     [self setBackgroundColor: _savedBackgroundColor];
+@@ -529,6 +532,23 @@ - (void)didMoveToWindow
+     [self setKeyboardDisplayRequiresUserAction: _savedKeyboardDisplayRequiresUserAction];
+     [self visitSource];
+   }
++}
++
++// react-native-mac os does not support didMoveToSuperView
++#if !TARGET_OS_OSX
++- (void)didMoveToSuperview
++{
++  if (self.superview != nil && _webView == nil) {
++    [self initializeWebView];
++  }
++}
++#endif // !TARGET_OS_OSX
++
++- (void)didMoveToWindow
++{
++  if (self.window != nil && _webView == nil) {
++    [self initializeWebView];
++  }
+ #if !TARGET_OS_OSX
+   // Allow this object to recognize gestures
+   if (self.menuItems != nil) {

tailwind.config.js

@@ -64,8 +64,13 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
       },
       animation: {
+        "fade-in": "fade-in 0.3s ease-out",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },