avoid calling web view load twice

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebReader.kt

@@ -4,6 +4,7 @@ import android.annotation.SuppressLint
 import android.content.ClipData
 import android.content.ClipboardManager
 import android.content.Context
+import android.graphics.Bitmap
 import android.graphics.Rect
 import android.util.Log
 import android.view.*
@@ -66,12 +67,13 @@ fun WebReader(
         settings.allowFileAccess = true
         settings.domStorageEnabled = true
 
+        visibility = View.INVISIBLE
+
         webViewClient = object : WebViewClient() {
           override fun onPageFinished(view: WebView?, url: String?) {
             super.onPageFinished(view, url)
-            // Add padding to top so TopAppBar doesn't cover content
             viewModel?.showNavBar()
-            view?.loadUrl("javascript:(function(){ document.body.style.paddingTop = '48px'})();");
+            visibility = View.VISIBLE
           }
         }
 

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebReaderLoadingContainer.kt

@@ -9,14 +9,11 @@ import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.List
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Icon
@@ -27,17 +24,12 @@ import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
-import androidx.compose.ui.input.nestedscroll.NestedScrollSource
-import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
-import androidx.lifecycle.viewmodel.compose.viewModel
 import app.omnivore.omnivore.MainActivity
 import app.omnivore.omnivore.ui.savedItemViews.SavedItemContextMenu
 import app.omnivore.omnivore.ui.theme.OmnivoreTheme
@@ -59,12 +51,20 @@ class WebReaderLoadingContainerActivity: ComponentActivity() {
       val systemUiController = rememberSystemUiController()
       val useDarkIcons = !isSystemInDarkTheme()
 
+      DisposableEffect(systemUiController, useDarkIcons) {
+        systemUiController.setSystemBarsColor(
+          color = Color.Black,
+          darkIcons = false
+        )
+
+        onDispose {}
+      }
+
       OmnivoreTheme {
         Box(
           modifier = Modifier
             .fillMaxSize()
             .background(color = Color.Black)
-            .systemBarsPadding()
         ) {
           if (viewModel.hasFetchError.value == true) {
             Text("We were unable to fetch your content.")
@@ -78,15 +78,6 @@ class WebReaderLoadingContainerActivity: ComponentActivity() {
           }
         }
       }
-
-      DisposableEffect(systemUiController, useDarkIcons) {
-        systemUiController.setSystemBarsColor(
-          color = Color.Black,
-          darkIcons = false
-        )
-
-        onDispose {}
-      }
     }
 
     // animate the view up when keyboard appears
@@ -107,7 +98,6 @@ class WebReaderLoadingContainerActivity: ComponentActivity() {
 
 @Composable
 fun WebReaderLoadingContainer(slug: String? = null, requestID: String? = null, onLibraryIconTap: (() -> Unit)? = null, webReaderViewModel: WebReaderViewModel) {
-  Log.d("reader", "loading web reader")
   val onBackPressedDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher
 
   var isMenuExpanded by remember { mutableStateOf(false) }
@@ -119,28 +109,20 @@ fun WebReaderLoadingContainer(slug: String? = null, requestID: String? = null, o
   val toolbarHeightPx: Float by webReaderViewModel.currentToolbarHeightLiveData.observeAsState(0.0f)
 
   val maxToolbarHeight = 48.dp
+  webReaderViewModel.maxToolbarHeightPx = with(LocalDensity.current) { maxToolbarHeight.roundToPx().toFloat() }
+  webReaderViewModel.loadItem(slug = slug, requestID = requestID)
 
-  if (webReaderParams == null) {
-    webReaderViewModel.maxToolbarHeightPx = with(LocalDensity.current) { maxToolbarHeight.roundToPx().toFloat() }
-    webReaderViewModel.loadItem(slug = slug, requestID = requestID)
-
-    Column(
-      verticalArrangement = Arrangement.SpaceAround,
-      horizontalAlignment = Alignment.CenterHorizontally,
-      modifier = Modifier
-        .fillMaxSize()
-        .padding(horizontal = 16.dp)
-    ) {
-      Text("Loading...", color = Color.White)
-    }
-  }
-
-  if (webReaderParams != null) {
-    Box(
-      modifier = Modifier
-        .fillMaxSize()
-    ) {
-        WebReader(webReaderParams!!, webReaderViewModel.storedWebPreferences(isSystemInDarkTheme()), webReaderViewModel)
+  Box(
+    modifier = Modifier
+      .fillMaxSize()
+      .systemBarsPadding()
+  ) {
+    if (webReaderParams != null) {
+      WebReader(
+        webReaderParams!!,
+        webReaderViewModel.storedWebPreferences(isSystemInDarkTheme()),
+        webReaderViewModel
+      )
 
       TopAppBar(
         modifier = Modifier
@@ -174,7 +156,12 @@ fun WebReaderLoadingContainer(slug: String? = null, requestID: String? = null, o
             isExpanded = isMenuExpanded,
             isArchived = webReaderParams!!.item.isArchived,
             onDismiss = { isMenuExpanded = false },
-            actionHandler = { webReaderViewModel.handleSavedItemAction(webReaderParams!!.item.savedItemId, it) }
+            actionHandler = {
+              webReaderViewModel.handleSavedItemAction(
+                webReaderParams!!.item.savedItemId,
+                it
+              )
+            }
           )
         }
       )

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/reader/WebReaderViewModel.kt

@@ -49,8 +49,13 @@ class WebReaderViewModel @Inject constructor(
 
   var hasTappedExistingHighlight = false
   var lastTapCoordinates: TapCoordinates? = null
+  private var isLoading = false
   
   fun loadItem(slug: String?, requestID: String?) {
+    if (isLoading || webReaderParamsLiveData.value != null) { return }
+    isLoading = true
+    Log.d("reader", "load item called")
+
     viewModelScope.launch {
       slug?.let { loadItemUsingSlug(it) }
       requestID?.let { loadItemUsingRequestID(it) }
@@ -72,6 +77,7 @@ class WebReaderViewModel @Inject constructor(
     if (webReaderParams != null) {
       Log.d("reader", "data loaded from server")
       webReaderParamsLiveData.postValue(webReaderParams)
+      isLoading = false
     } else {
       loadItemFromDB(slug)
     }
@@ -83,6 +89,7 @@ class WebReaderViewModel @Inject constructor(
 
     if (webReaderParams != null && isSuccessful) {
       webReaderParamsLiveData.postValue(webReaderParams)
+      isLoading = false
     } else if (requestCount < 7) {
       // delay then try again
       delay(2000L)
@@ -109,6 +116,7 @@ class WebReaderViewModel @Inject constructor(
         Log.d("sync", "data loaded from db")
         webReaderParamsLiveData.postValue(WebReaderParams(persistedItem.savedItem, articleContent))
       }
+      isLoading = false
     }
   }
 

packages/appreader/src/index.jsx

@@ -54,7 +54,7 @@ const App = () => {
   applyStoredTheme(false)
 
   document.addEventListener('updateLabels', (event) => {
-    console.log("updating labels: ", event.labels)
+    console.log('updating labels: ', event.labels)
     setLabels(event.labels)
   })
 
@@ -65,6 +65,7 @@ const App = () => {
           overflowY: 'auto',
           height: '100%',
           width: '100vw',
+          paddingTop: window.webkit ? 0 : '48px', // add 48px to android only
         }}
       >
         <VStack