Add placeholder icon

src/gallery.tsx

@@ -13,6 +13,7 @@ import { TranslationBundle } from '@jupyterlab/translation';
 import { IExhibit } from './types';
 import { IExhibitReply } from './types';
 import { requestAPI, eventStream, IStreamMessage, IProgress } from './handler';
+import { repositoryIcon } from './icons';
 
 interface IActions {
   download(exhibit: IExhibit): Promise<void>;
@@ -233,7 +234,12 @@ function Exhibit(props: {
       <h4 className="jp-Exhibit-title">{exhibit.title}</h4>
       <div className="jp-Exhibit-middle">
         <div className="jp-Exhibit-icon">
-          <img src={exhibit.icon} alt={exhibit.title} />
+          {
+            exhibit.icon ?
+            <img src={exhibit.icon} alt={exhibit.title} />
+            :
+            <repositoryIcon.react className="jp-exhibitPlaceholder" />
+          }
         </div>
         <div className="jp-Exhibit-buttons">
           {!exhibit.isCloned ? (

src/icons.ts

@@ -1,7 +1,13 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import gallerySvgstr from '../style/icons/md/gallery.svg';
+import repositorySvgstr from '../style/icons/md/repository.svg';
 
 export const galleryIcon = new LabIcon({
   name: 'jupyterlab-gallery:gallery',
   svgstr: gallerySvgstr
 });
+
+export const repositoryIcon = new LabIcon({
+  name: 'jupyterlab-gallery:repository',
+  svgstr: repositorySvgstr
+});

style/base.css

@@ -38,10 +38,19 @@
   cursor: default;
 }
 
-.jp-Exhibit-icon > img {
+.jp-Exhibit-icon > img, .jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
   max-width: 100%;
 }
 
+.jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
+  max-width: 100%;
+  block-size: 100%;
+}
+
+.jp-exhibitPlaceholder {
+  height: 100%;
+}
+
 .jp-Exhibit-icon {
   display: flex;
   justify-content: center;