feat(comparisonStore): add the check before loading
This commit is contained in:
@@ -78,8 +78,6 @@ class ComparisonStore {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.#fontsReady = false;
|
|
||||||
|
|
||||||
const weight = this.#typography.weight;
|
const weight = this.#typography.weight;
|
||||||
const size = this.#typography.renderedSize;
|
const size = this.#typography.renderedSize;
|
||||||
const fontAName = this.#fontA?.name;
|
const fontAName = this.#fontA?.name;
|
||||||
@@ -87,11 +85,25 @@ class ComparisonStore {
|
|||||||
|
|
||||||
if (!fontAName || !fontBName) return;
|
if (!fontAName || !fontBName) return;
|
||||||
|
|
||||||
|
const fontAString = `${weight} ${size}px "${fontAName}"`;
|
||||||
|
const fontBString = `${weight} ${size}px "${fontBName}"`;
|
||||||
|
|
||||||
|
// Check if already loaded to avoid UI flash
|
||||||
|
const isALoaded = document.fonts.check(fontAString);
|
||||||
|
const isBLoaded = document.fonts.check(fontBString);
|
||||||
|
|
||||||
|
if (isALoaded && isBLoaded) {
|
||||||
|
this.#fontsReady = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#fontsReady = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Step 1: Load fonts into memory
|
// Step 1: Load fonts into memory
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
document.fonts.load(`${weight} ${size}px "${fontAName}"`),
|
document.fonts.load(fontAString),
|
||||||
document.fonts.load(`${weight} ${size}px "${fontBName}"`),
|
document.fonts.load(fontBString),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Step 2: Wait for browser to be ready to render
|
// Step 2: Wait for browser to be ready to render
|
||||||
|
|||||||
Reference in New Issue
Block a user