fix: font store load method skip loading (#1909)

.changeset/cuddly-dolls-burn.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/font': patch
+---
+
+fix: font store load method skip loading

packages/font/src/font.js

@@ -53,13 +53,11 @@ class FontSource {
     this.fontWeight = fontWeight || 400;
 
     this.data = null;
-    this.loading = false;
     this.options = options;
+    this.loadResultPromise = null;
   }
 
-  async load() {
-    this.loading = true;
-
+  async _load() {
     const { postscriptName } = this.options;
 
     if (isDataUrl(this.src)) {
@@ -78,8 +76,13 @@ class FontSource {
         ),
       );
     }
+  }
 
-    this.loading = false;
+  async load() {
+    if (this.loadResultPromise === null) {
+      this.loadResultPromise = this._load();
+    }
+    return this.loadResultPromise;
   }
 }
 

packages/font/src/index.js

@@ -57,9 +57,7 @@ function FontStore() {
     const f = this.getFont(descriptor);
 
     // We cache the font to avoid fetching it many times
-    if (!f.data && !f.loading) {
-      await f.load();
-    }
+    await f.load();
   };
 
   this.reset = () => {

packages/font/tests/font.test.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const fontkit = require('@react-pdf/fontkit');
+const { default: FontStore } = require('../src/index');
+
+global.BROWSER = false;
+
+describe('FontStore', () => {
+  test('load method will wait for font loaded when parallel execution', async () => {
+    const openSpy = jest.spyOn(fontkit.default, 'open');
+    const fontStore = new FontStore();
+    const fontFamily = '思源';
+    fontStore.register({
+      family: fontFamily, // assume this is a chinese font
+      fonts: [
+        {
+          src: path.join(__dirname, '../../examples/public/Roboto-Bold.ttf'),
+        },
+      ],
+    });
+
+    const getFontSource = () =>
+      fontStore.getRegisteredFonts()[fontFamily].sources[0];
+
+    const getFontData = () => getFontSource().data;
+
+    const makeSureFontLoadedAfterLoad = async () => {
+      expect(getFontData()).toBeNull();
+      await fontStore.load({
+        fontFamily,
+      });
+      expect(getFontData()).not.toBeNull();
+    };
+    return Promise.all([
+      makeSureFontLoadedAfterLoad(),
+      makeSureFontLoadedAfterLoad(),
+    ]).then(() => {
+      // call load method twice but just call file open method once
+      expect(openSpy.mock.calls).toHaveLength(1);
+    });
+  });
+});