From 4287f4b8d45a02763aef0988ceda65a8c9c9b117 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 7 Nov 2023 13:58:06 -0800
Subject: [PATCH] Update docs website to split changelog rendering by year

+ [UX] Add a skeleton loader - raw loader still takes a noticeable second or two for the larger years, so might as well make that behavior more intentional
---
 CHANGELOG.md                            |  2 +-
 src-docs/src/views/package/changelog.js | 71 +++++++++++++++++++++----
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e49c4a544c26..8052f44d02c5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,3 @@
 # EUI changelogs
 
-EUI's changelogs are too large to view in a single file, and have been split up by year. You can view them in the [changelogs](./changelogs) folder, or [search for individual releases](https://github.com/elastic/eui/releases) to view their changelog.
+EUI's changelogs are too large to view in a single file, and have been split up by year. You can view them in the [changelogs](./changelogs) folder, on our [docs website](https://eui.elastic.co/#/package/changelog), or [search for individual releases](https://github.com/elastic/eui/releases) to view their changelog.
diff --git a/src-docs/src/views/package/changelog.js b/src-docs/src/views/package/changelog.js
index a3652b6e8858..a57970e0cd2d 100644
--- a/src-docs/src/views/package/changelog.js
+++ b/src-docs/src/views/package/changelog.js
@@ -1,22 +1,71 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
-import { EuiMarkdownFormat } from '../../../../src';
+import {
+  EuiSkeletonLoading,
+  EuiSkeletonTitle,
+  EuiSkeletonText,
+  EuiMarkdownFormat,
+  EuiSpacer,
+} from '../../../../src';
 import { GuideSection } from '../../components';
 import { GuideTabbedPage } from '../../components/guide_tabbed_page';
 
-const changelogSource =
-  require('!!raw-loader!../../../../CHANGELOG.md').default.replace(
-    /## \[`main`\].+?##(?= \[`\d)/s, // remove the `main` heading & contents
-    '##'
+const thisYear = new Date().getUTCFullYear();
+const startingYear = 2017;
+const years = thisYear - startingYear + 1;
+const yearsAsArray = Array.from({ length: years }, (_, i) => thisYear - i);
+
+const ChangelogPageByYear = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [changelogSource, setChangelogSource] = useState('');
+
+  const { pathname } = useLocation();
+  useEffect(() => {
+    const pathArray = pathname.split('/');
+    const year = pathArray[pathArray.length - 1];
+
+    setChangelogSource(
+      require(`!!raw-loader!../../../../changelogs/CHANGELOG_${year}.md`)
+        .default
+    );
+    setIsLoading(false);
+  }, [pathname]);
+
+  return (
+    <GuideSection>
+      <EuiSkeletonLoading
+        isLoading={isLoading}
+        contentAriaLabel="Changelog"
+        loadingContent={
+          <>
+            <EuiSkeletonTitle size="l" />
+            <EuiSpacer size="s" />
+            <EuiSkeletonText lines={10} />
+          </>
+        }
+        loadedContent={<EuiMarkdownFormat>{changelogSource}</EuiMarkdownFormat>}
+      />
+    </GuideSection>
   );
+};
 
 export const Changelog = {
   name: 'Changelog',
   component: () => (
-    <GuideTabbedPage title="Changelog">
-      <GuideSection>
-        <EuiMarkdownFormat>{changelogSource}</EuiMarkdownFormat>
-      </GuideSection>
-    </GuideTabbedPage>
+    <GuideTabbedPage
+      title="Changelog"
+      // Renders the tabbed content
+      pages={yearsAsArray.map((year) => ({
+        title: year.toString(),
+        page: ChangelogPageByYear,
+      }))}
+    />
   ),
+  // Renders sidenav links
+  sections: yearsAsArray.map((year) => ({
+    id: year,
+    title: year.toString(),
+    sections: [], // Triggers non-# URLs
+  })),
 };