Delayed rendering leads to ugly UI
Closed this issue · 11 comments
I attached two video to demonstrate the problem.
The rounded corners ( styleBasic [ radius 4 ] ) are appearing, but very often it takes a second, which is kind of annoying. Not only tooltips are affected, but also buttons.
pl-next-2022-06-15_20.03.58.mp4
Here in the second video you can see the same quick flicker for buttons, overlays and close icons.
pl-next-2022-06-15_20.09.38.mp4
Do you have a minimal example I can use to reproduce the issue? I tried with the following (it's a modified version of Tutorial 02), but it looks good for me (tested on macOS and Ubuntu 21.04):
{-|
Module : Tutorial02_Styling
Copyright : (c) 2018 Francisco Vallarino
License : BSD-3-Clause (see the LICENSE file)
Maintainer : fjvallarino@gmail.com
Stability : experimental
Portability : non-portable
Main module for the '02 - Styling' tutorial.
-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TemplateHaskell #-}
module Tutorial02_Styling where
import Control.Lens
import Data.Text (Text)
import Monomer
import qualified Monomer.Lens as L
data AppModel = AppModel {
_sampleText :: Text,
_showPicker :: Bool,
_fontName :: Font,
_fontSize :: Double,
_fontColor :: Color,
_topVisible :: Bool,
_compVal :: ()
} deriving (Eq, Show)
data AppEvent
= AppInit
| AppShow
| AppHide
deriving (Eq, Show)
makeLenses 'AppModel
buildComp :: WidgetEnv () () -> () -> WidgetNode () ()
buildComp wenv model = vstack [
tooltip "Test" (button "AAAA" ())
] `styleBasic` [minHeight 100, bgColor gray]
handleComp :: WidgetEnv () () -> WidgetNode () () -> () -> () -> [EventResponse () () AppModel AppEvent]
handleComp wenv node model evt = [
Report AppHide
]
buildUI
:: WidgetEnv AppModel AppEvent
-> AppModel
-> WidgetNode AppModel AppEvent
buildUI wenv model = widgetTree where
widgetTree = zstack [
bottomPanel,
topPanel
`nodeVisible` (model ^. topVisible)
]
topPanel = composite "" compVal buildComp handleComp
bottomPanel = vstack [
titleText "Text",
box (textField sampleText) `styleBasic` [paddingV 10],
tooltip "Test" (button "AAAA" AppShow),
titleText "Font name",
hgrid [
hstack [
labeledRadio "Regular " "Regular" fontName,
filler
],
hstack [
labeledRadio "Medium " "Medium" fontName,
filler
],
hstack [
labeledRadio "Bold " "Bold" fontName,
filler
],
hstack [
labeledRadio "Italic " "Italic" fontName
]
] `styleBasic` [paddingV 10],
titleText "Font size",
hslider fontSize 10 200
`styleBasic` [paddingV 10, fgColor orange],
titleText "Font color",
hstack [
labeledCheckbox "Show color picker " showPicker,
filler
] `styleBasic` [paddingT 10, paddingB 5],
colorPicker fontColor
`nodeVisible` (model ^. showPicker)
`styleBasic` [paddingB 10],
sampleTextLabel
] `styleBasic` [padding 10]
titleText text = label text
`styleBasic` [textFont "Medium", textSize 20]
sampleTextLabel = label_ (model ^. sampleText) [ellipsis]
`styleBasic` [
bgColor dimGray,
border 4 lightGray,
radius 10,
textFont (model ^. fontName),
textSize (model ^. fontSize),
textColor (model ^. fontColor),
textCenter,
flexHeight 100]
handleEvent
:: WidgetEnv AppModel AppEvent
-> WidgetNode AppModel AppEvent
-> AppModel
-> AppEvent
-> [AppEventResponse AppModel AppEvent]
handleEvent wenv node model evt = case evt of
AppInit -> []
AppShow -> [Model $ model & topVisible .~ True]
AppHide -> [Model $ model & topVisible .~ False]
main02 :: IO ()
main02 = do
startApp model handleEvent buildUI config
where
config = [
appWindowTitle "Tutorial 02 - Styling",
appWindowIcon "./assets/images/icon.bmp",
appTheme darkTheme,
appFontDef "Regular" "./assets/fonts/Roboto-Regular.ttf",
appFontDef "Medium" "./assets/fonts/Roboto-Medium.ttf",
appFontDef "Bold" "./assets/fonts/Roboto-Bold.ttf",
appFontDef "Italic" "./assets/fonts/Roboto-Italic.ttf",
appInitEvent AppInit
]
model = AppModel {
_sampleText = "Hello World!",
_showPicker = False,
_fontName = "Regular",
_fontSize = 24,
_fontColor = white,
_topVisible = False,
_compVal = ()
}I'm not sure I follow. The example I pasted has a composite embedded in the main UI and a zstack to simulate what you show in the videos. If possible, could you modify the example and paste it here with your proposed changes?
That's weird, I can reproduce the issue with your example. See attached video.
pl-next-2022-06-17_14.49.04.mp4
I assume that's Linux. What window manager are you using? I can create a VM to test it in the next few days.
Kubuntu 20.04
KDE Plasma 5.18.8
KDE Frameworks 5.68.0
Qt Version: 5.12.8
By the way, probably related issue happens for me with 100% reproduceability on any widget with rounded corners.
Here's what I see after start:
Note that what's different from OP, for me it stays this way until I move the mouse. And then it immediately becomes this:
And this is the "style" bit for this widget:
vstack
[header, diff]
`styleBasic` [border 1 borderColor, radius 10]radius 6 looks like this:
And sometimes successive launches lead to different artifacts, for example here's the same radius 6, but for some reason only right corners are "glitchy":
System Details:
Renderer: AMD Radeon RX 5500 XT (navi14, LLVM 14.0.6, DRM 3.48, 6.0.1-arch2-1)
Version: 4.6 (Core Profile) Mesa 22.2.1
OS: ArchLinux, kernel 6.0.1-arch2-1
Desktop: GNOME 42.1, Wayland
Monomer: 1.5.0.0
I created a PR with a fix/workaround that solves the issue, at least on my end. This seems to be somehow platform dependent, since it does not happen on my older machine (which is the reason I could not work on it earlier): #215
You can test the fix by modifying your stack.yaml to point to:
- git: https://github.com/fjvallarino/monomer.git
commit: 53647710e856da733d69fcf1639976e5824cbb0dI can confirm: with this commit I have no more rounded corners artifacts I described in #173 (comment). Nice and clean now! 👍
I feel the solution/workaround for #180 could be something similar to what was done for this issue.
I'll close the issue for the time being, since it appears to work correctly now. If you happen to test it and it does not work as expected, please let me know (re-open the issue or create a new one, as you prefer). Thanks!