diff --git a/components/PackageReadMePlaceholder.tsx b/components/PackageReadMePlaceholder.tsx
new file mode 100644
index 0000000..46ade4b
--- /dev/null
+++ b/components/PackageReadMePlaceholder.tsx
@@ -0,0 +1,51 @@
+import Html from './Html';
+
+type Props = {
+ packageName: string,
+ version: string,
+ title: string,
+ description: string
+}
+
+export default function PackageReadMePlaceholder(data: Props) {
+ const {
+ packageName,
+ version,
+ title,
+ description
+ } = data;
+
+ return (
+
+
+
+
+
+ {`${packageName} (version ${version})`}
+
+
+ {
+ title
+ &&
+ (
+
+ )
+ }
+ {
+ description
+ &&
+ (
+
+ Description
+ {description}
+
+ )
+ }
+
+
+
+ );
+}
diff --git a/pages/packages/[package]/versions/[version].tsx b/pages/packages/[package]/versions/[version].tsx
index 7988b0d..0c3d1f3 100644
--- a/pages/packages/[package]/versions/[version].tsx
+++ b/pages/packages/[package]/versions/[version].tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
import Layout from '../../../../components/Layout';
import PackageFunctionList from '../../../../components/PackageFunctionList';
import PackageReadme from '../../../../components/PackageReadme';
+import PackageReadMePlaceholder from '../../../../components/PackageReadMePlaceholder';
import PackageSidebar from '../../../../components/PackageSidebar';
import { getMonthlyDownloads } from '../../../../lib/downloads';
import {
@@ -112,7 +113,18 @@ export default function PackageVersionPage({
)}
+ {
+ metadata.readmemd
+ ?
+ :
+
+ }