chore(demo): improve loading views (#1107)

Resolving several visual quirks with Hyperview demo: - Updated demo loading screen background to white - Removed title from loading screens - Setting a top padding to reduce screen jumping down after render | Before | After | | -- | -- | | ![before-navigate](https://github.com/user-attachments/assets/3837feb4-86d5-4012-bc09-d0a0c1ffb6fc) | ![after-navigate](https://github.com/user-attachments/assets/eb4b2d40-52a8-4c3a-8e9c-55054bab600d) | | ![before-new](https://github.com/user-attachments/assets/e808ecbb-705b-4f25-8f08-75427cdb9a2d) | ![after-new](https://github.com/user-attachments/assets/26ef4b46-0491-433b-a981-1832b8b72f40) | [Asana](https://app.asana.com/0/1204008699308084/1209519280674251)
Instawork · Mar 4, 2025 · 8b37429 · 8b37429
1 parent 90f727c
commit 8b37429
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 1 deletion.
diff --git a/demo/App.tsx b/demo/App.tsx
@@ -5,6 +5,7 @@ import {
   SafeAreaInsetsContext,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
+import { Platform, View } from 'react-native';
 import Behaviors from './src/Behaviors';
 import { BottomTabBar } from './src/Core';
 import { BottomTabBarContextProvider } from './src/Contexts';
@@ -14,7 +15,6 @@ import Hyperview from 'hyperview';
 import LoadingScreen from './src/loading-screen';
 import { NavigationContainer } from '@react-navigation/native';
 import React from 'react';
-import { View } from 'react-native';
 
 // this value needs to match the path prefix where the app is hosted
 // our demo app is hosted under instawork.github.io/hyperview
@@ -49,6 +49,7 @@ export default () => (
             paddingBottom: insets?.bottom,
             paddingLeft: insets?.left,
             paddingRight: insets?.right,
+            paddingTop: insets?.top,
           }}
         >
           <NavigationContainer linking={linking}>

diff --git a/demo/backend/_includes/templates/loading-screen.xml.njk b/demo/backend/_includes/templates/loading-screen.xml.njk
@@ -4,6 +4,7 @@
     {% include 'templates/styles.xml.njk' %}
   </styles>
   <body style="body" safe-area="true">
+    {% set hv_title = "" %}
     {% include 'templates/header.xml.njk' %}
     <view style="loading">
       <text style="loading-text">Loading…</text>

diff --git a/demo/backend/_includes/templates/styles.xml.njk b/demo/backend/_includes/templates/styles.xml.njk
@@ -22,6 +22,7 @@
   paddingBottom="16"
   paddingLeft="24"
   paddingRight="24"
+  height="48"
 />
 <style
   id="header-btn"

diff --git a/demo/src/loading-screen/index.tsx b/demo/src/loading-screen/index.tsx
@@ -24,6 +24,7 @@ const LoadingScreen = (props: Props) => {
     <View
       style={{
         alignItems: 'center',
+        backgroundColor: 'white',
         flex: 1,
         gap: 10,
         justifyContent: 'center',