licenses: finish NonIdealState TODO

src/licenses/LicenseDialog.tsx

@@ -11,6 +11,7 @@ import {
     Classes,
     Dialog,
     NonIdealState,
+    Spinner,
 } from '@blueprintjs/core';
 import { useI18n } from '@shopify/react-i18n';
 import React, { useState } from 'react';
@@ -38,15 +39,19 @@ type LicenseListPanelProps = {
 const LicenseListPanel: React.VoidFunctionComponent<LicenseListPanelProps> = ({
     onItemClick,
 }) => {
+    const [i18n] = useI18n({ id: 'license', translations: { en }, fallback: en });
     const { data, error } = useFetch<LicenseList>('static/oss-licenses.json');
 
     return (
         <div className="pb-license-list">
-            {error || !data ? (
-                // TODO: this should be translated and hooked to
-                // state indicating if download is in progress
-                // or there was an actual failure.
-                <NonIdealState>Failed to load license data.</NonIdealState>
+            {!data ? (
+                <NonIdealState>
+                    {error ? (
+                        i18n.translate(LicenseStringId.ErrorFetchFailed)
+                    ) : (
+                        <Spinner />
+                    )}
+                </NonIdealState>
             ) : (
                 <ButtonGroup minimal={true} vertical={true} alignText="left">
                     {data.map((info, i) => (

src/licenses/i18n.en.json

@@ -5,6 +5,9 @@
         "packageLabel": "Package:",
         "authorLabel": "Author:",
         "licenseLabel": "License:",
+        "error": {
+            "fetchFailed": "Failed to load license data."
+        },
         "help": {
             "selectPackage": "Select a package to view the license."
         }

src/licenses/i18n.ts

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2022 The Pybricks Authors
 
 // License dialog translation keys.
 
@@ -9,5 +9,6 @@ export enum LicenseStringId {
     PackageLabel = 'license.packageLabel',
     AuthorLabel = 'license.authorLabel',
     LicenseLabel = 'license.licenseLabel',
+    ErrorFetchFailed = 'license.error.fetchFailed',
     SelectPackageHelp = 'license.help.selectPackage',
 }