bug: Tailwind styles not applied immediately in SvelteKit project

Tommertom commented 1 year ago

Bug Report

Capacitor Version

   Capacitor Doctor

Latest Dependencies:

  @capacitor/cli: 4.6.3
  @capacitor/core: 4.6.3
  @capacitor/android: 4.6.3
  @capacitor/ios: 4.6.3

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/android: 4.6.2
  @capacitor/cli: 4.6.2
  @capacitor/core: 4.6.2

[success] Android looking great! 👌

Platform(s)

Only tested Android - Pixel 3 API 30 (emulator) (Pixel_3_API_30)

Current Behavior

When launching the Skeleton starter template in an Android Emulator (via Capacitor), the styles are not immediately applied leadng to this initial view:

Later replaced (a few seconds) by

Steps To Reproduce

See repo https://github.com/Tommertom/skeleton-capacitor-test

Reproduction

start a new skeleton project using the npm create command - select full starter (npm create skeleton-app@latest my-skeleton-app)
make sure Android studio is installed and you have at least one emulator instance (Pixel running API 30)
make the app use adapter static and running as a spa
add capacitor integrations and configure
- npm i -D @capacitor/cli
- npm i @capacitor/core @capacitor/android
- npm run build
- npx cap init myapp io.myapp.skeleton -web-dir build
- npx cap open android -> select trust projecft and close Android studio
Run the project in the emulator npx cap run android

Expected Behavior

Styles applied immediately.

Code Reproduction

See repo

Other Technical Details

Android Studio Dolphin | 2021.3.1 Patch 1

npm --version output: 8.10.0

node --version output: v16.14.2

Additional Context

Also posted on https://github.com/skeletonlabs/skeleton/issues/876

SkeletonUI is an UI library built using TailwindCSS - so this is assumed to be related to Tailwind icm SvelteKit and Capacitor. But that could be proven wrong - any hints on how to detect what is happening? Use chrome dev inspector?

Tommertom commented 1 year ago

After testing it seems more related to Skeleton bootstrapping. But not conclusive. I have posted some findings on the repo of Skeleton - https://github.com/skeletonlabs/skeleton/issues/876

jcesarmobile commented 1 year ago

I see the same behaviour on an android app that just uses a WebView with no Capacitor involved, so I don't think this is a Capacitor bug but a skeleton bug and they have closed the linked issue, so I'm closing it too.

ionic-team / capacitor