Ensure fonts are loaded so it won't yield

rojo-rbx · Nov 9, 2024 · e8e7fd1 · e8e7fd1
1 parent 38895b3
commit e8e7fd1
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 21 deletions.
diff --git a/plugin/src/App/Components/Dropdown.lua b/plugin/src/App/Components/Dropdown.lua
@@ -8,7 +8,7 @@ local Flipper = require(Packages.Flipper)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local ScrollingFrame = require(script.Parent.ScrollingFrame)
@@ -49,7 +49,7 @@ function Dropdown:render()
 		local width = -1
 		for i, option in self.props.options do
 			local text = tostring(option or "")
-			local textBounds = getTextBounds(text, theme.Font.Main, theme.TextSize.Body, math.huge)
+			local textBounds = getTextBoundsAsync(text, theme.Font.Main, theme.TextSize.Body, math.huge)
 			if textBounds.X > width then
 				width = textBounds.X
 			end

diff --git a/plugin/src/App/Components/StringDiffVisualizer/init.lua b/plugin/src/App/Components/StringDiffVisualizer/init.lua
@@ -9,7 +9,7 @@ local StringDiff = require(script:FindFirstChild("StringDiff"))
 
 local Timer = require(Plugin.Timer)
 local Theme = require(Plugin.App.Theme)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local CodeLabel = require(Plugin.App.Components.CodeLabel)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
@@ -63,8 +63,8 @@ end
 function StringDiffVisualizer:calculateContentSize(theme)
 	local oldString, newString = self.props.oldString, self.props.newString
 
-	local oldStringBounds = getTextBounds(oldString, theme.Font.Code, theme.TextSize.Code, math.huge)
-	local newStringBounds = getTextBounds(newString, theme.Font.Code, theme.TextSize.Code, math.huge)
+	local oldStringBounds = getTextBoundsAsync(oldString, theme.Font.Code, theme.TextSize.Code, math.huge)
+	local newStringBounds = getTextBoundsAsync(newString, theme.Font.Code, theme.TextSize.Code, math.huge)
 
 	self.setContentSize(
 		Vector2.new(math.max(oldStringBounds.X, newStringBounds.X), math.max(oldStringBounds.Y, newStringBounds.Y))

diff --git a/plugin/src/App/Components/TextButton.lua b/plugin/src/App/Components/TextButton.lua
@@ -8,7 +8,7 @@ local Flipper = require(Packages.Flipper)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local SlicedImage = require(script.Parent.SlicedImage)
 local TouchRipple = require(script.Parent.TouchRipple)
@@ -40,7 +40,7 @@ end
 
 function TextButton:render()
 	return Theme.with(function(theme)
-		local textBounds = getTextBounds(self.props.text, theme.Font.Main, theme.TextSize.Large, math.huge)
+		local textBounds = getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Large, math.huge)
 
 		local style = self.props.style
 

diff --git a/plugin/src/App/Components/Tooltip.lua b/plugin/src/App/Components/Tooltip.lua
@@ -7,7 +7,7 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 local Theme = require(Plugin.App.Theme)
 
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 
@@ -24,8 +24,10 @@ local TooltipContext = Roact.createContext({})
 local function Popup(props)
 	return Theme.with(function(theme)
 		local textXSpace = math.min(props.parentSize.X, 120)
-		local textBounds =
-			Vector2.new(textXSpace, getTextBounds(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace).Y)
+		local textBounds = Vector2.new(
+			textXSpace,
+			getTextBoundsAsync(props.Text, theme.Font.Main, theme.TextSize.Medium, textXSpace).Y
+		)
 		local contentSize = textBounds + TEXT_PADDING + (Vector2.one * 2)
 
 		local trigger = props.Trigger:getValue()

diff --git a/plugin/src/App/Notifications.lua b/plugin/src/App/Notifications.lua
@@ -11,7 +11,7 @@ local Log = require(Packages.Log)
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 local bindingUtil = require(Plugin.App.bindingUtil)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
 local TextButton = require(Plugin.App.Components.TextButton)
@@ -104,7 +104,7 @@ function Notification:render()
 					transparency = transparency,
 				})
 
-				buttonsX += getTextBounds(action.text, theme.Font.Main, theme.TextSize.Large, math.huge).X + (theme.TextSize.Body * 2)
+				buttonsX += getTextBoundsAsync(action.text, theme.Font.Main, theme.TextSize.Large, math.huge).X + (theme.TextSize.Body * 2)
 
 				count += 1
 			end
@@ -115,8 +115,10 @@ function Notification:render()
 		local paddingY, logoSize = 20, 32
 		local actionsY = if self.props.actions then 35 else 0
 		local textXSpace = math.max(250, buttonsX) + 35
-		local textBounds =
-			Vector2.new(textXSpace, getTextBounds(self.props.text, theme.Font.Main, theme.TextSize.Body, textXSpace).Y)
+		local textBounds = Vector2.new(
+			textXSpace,
+			getTextBoundsAsync(self.props.text, theme.Font.Main, theme.TextSize.Body, textXSpace).Y
+		)
 		local contentX = math.max(textBounds.X, buttonsX)
 
 		local size = self.binding:map(function(value)

diff --git a/plugin/src/App/StatusPages/Error.lua b/plugin/src/App/StatusPages/Error.lua
@@ -5,7 +5,7 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 
 local Theme = require(Plugin.App.Theme)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local TextButton = require(Plugin.App.Components.TextButton)
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
@@ -49,8 +49,12 @@ function Error:render()
 				[Roact.Change.AbsoluteSize] = function(object)
 					local containerSize = object.AbsoluteSize - ERROR_PADDING * 2
 
-					local textBounds =
-						getTextBounds(self.props.errorMessage, theme.Font.Code, theme.TextSize.Code, containerSize.X)
+					local textBounds = getTextBoundsAsync(
+						self.props.errorMessage,
+						theme.Font.Code,
+						theme.TextSize.Code,
+						containerSize.X
+					)
 
 					self.setContentSize(Vector2.new(containerSize.X, textBounds.Y))
 				end,

diff --git a/plugin/src/App/StatusPages/Settings/Setting.lua b/plugin/src/App/StatusPages/Settings/Setting.lua
@@ -7,7 +7,7 @@ local Roact = require(Packages.Roact)
 local Settings = require(Plugin.Settings)
 local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
-local getTextBounds = require(Plugin.App.getTextBounds)
+local getTextBoundsAsync = require(Plugin.App.getTextBoundsAsync)
 
 local Checkbox = require(Plugin.App.Components.Checkbox)
 local Dropdown = require(Plugin.App.Components.Dropdown)
@@ -37,7 +37,7 @@ local function getTextBoundsWithLineHeight(
 	width: number,
 	lineHeight: number
 )
-	local textBounds = getTextBounds(text, font, textSize, width)
+	local textBounds = getTextBoundsAsync(text, font, textSize, width)
 
 	local lineCount = math.ceil(textBounds.Y / textSize)
 	local lineHeightAbsolute = textSize * lineHeight

diff --git a/plugin/src/App/Theme.lua b/plugin/src/App/Theme.lua
@@ -14,6 +14,8 @@ local function getStudio()
 	return _Studio
 end
 
+local ContentProvider = game:GetService("ContentProvider")
+
 local Rojo = script:FindFirstAncestor("Rojo")
 local Packages = Rojo.Packages
 
@@ -210,6 +212,13 @@ end
 
 function StudioProvider:init()
 	self:updateTheme()
+
+	-- Preload the Fonts so that getTextBoundsAsync won't yield
+	local fontAssetIds = {}
+	for _, font in self.state.theme.Font do
+		table.insert(fontAssetIds, font.Family)
+	end
+	pcall(ContentProvider.PreloadAsync, ContentProvider, fontAssetIds)
 end
 
 function StudioProvider:render()

diff --git a/plugin/src/App/getTextBounds.lua → plugin/src/App/getTextBoundsAsync.lua b/plugin/src/App/getTextBounds.lua → plugin/src/App/getTextBoundsAsync.lua
@@ -7,7 +7,13 @@ local Log = require(Packages.Log)
 
 local params = Instance.new("GetTextBoundsParams")
 
-local function getTextBounds(text: string, font: Font, textSize: number, width: number, richText: boolean?): Vector2
+local function getTextBoundsAsync(
+	text: string,
+	font: Font,
+	textSize: number,
+	width: number,
+	richText: boolean?
+): Vector2
 	params.Text = text
 	params.Font = font
 	params.Size = textSize
@@ -23,4 +29,4 @@ local function getTextBounds(text: string, font: Font, textSize: number, width:
 	return bounds
 end
 
-return getTextBounds
+return getTextBoundsAsync