Add delay during fetching of API data

mockoon · Apr 5, 2024 · f37193c · f37193c
1 parent 1dbe299
commit f37193c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 28 deletions.
diff --git a/components/templates-menu.tsx b/components/templates-menu.tsx
@@ -1,19 +1,19 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FunctionComponent } from 'react';
-import { Template } from '../models/templates.model';
+import { TemplateLight } from '../models/templates.model';
 import SidebarBanner from './sidebar-banner';
 
 const TemplatesMenu: FunctionComponent<{
-  templates: Template[];
-  activeTemplate?: Template;
+  templates: TemplateLight[];
 }> = function ({ templates }) {
   const router = useRouter();
+
   return (
     <aside className='flex-grow-1 sticky-top'>
       <ul className='card-list list mb-6'>
         <h6 className='fw-bold text-uppercase mb-2'>Templates</h6>
-        {templates.map((template, templateIndex) => {
+        {templates?.map((template, templateIndex) => {
           return (
             <li
               key={`template${templateIndex}`}

diff --git a/pages/templates/[slug].tsx b/pages/templates/[slug].tsx
@@ -5,8 +5,8 @@ import Meta from '../../components/meta';
 import TemplatesMenu from '../../components/templates-menu';
 import { templatesDesc } from '../../data/templates-desc';
 import Layout from '../../layout/layout';
-import { Template } from '../../models/templates.model';
-import { getTemplates } from '../../utils/utils';
+import { Template, TemplateLight } from '../../models/templates.model';
+import { getTemplate, getTemplatesList } from '../../utils/utils';
 
 const meta = {
   title: "Mockoon's pre-generated JSON templates",
@@ -15,17 +15,18 @@ const meta = {
 };
 
 export async function getStaticProps({ params }) {
-  const templates = await getTemplates();
+  const template = await getTemplate(params.slug);
+  const templates = await getTemplatesList();
 
   return {
     props: {
       templates,
-      template: templates.find((template) => template.slug === params.slug)
+      template
     }
   };
 }
 export async function getStaticPaths() {
-  const templates = await getTemplates();
+  const templates = await getTemplatesList();
 
   return {
     paths: templates.map((template) => {
@@ -38,7 +39,7 @@ export async function getStaticPaths() {
 }
 
 const SingleTemplate: FunctionComponent<{
-  templates: Template[];
+  templates: TemplateLight[];
   template: Template;
 }> = function ({ templates, template }) {
   return (
@@ -53,7 +54,7 @@ const SingleTemplate: FunctionComponent<{
         <div className='container'>
           <div className='row justify-content-center g-10'>
             <div className='col-12 col-lg-3'>
-              <TemplatesMenu templates={templates} activeTemplate={template} />
+              <TemplatesMenu templates={templates} />
             </div>
             <div className='col-12 col-lg-9'>
               <h3 className='fw-medium'>

diff --git a/pages/templates/index.tsx b/pages/templates/index.tsx
@@ -4,8 +4,8 @@ import Hero from '../../components/hero';
 import Meta from '../../components/meta';
 import TemplatesMenu from '../../components/templates-menu';
 import Layout from '../../layout/layout';
-import { Template } from '../../models/templates.model';
-import { getTemplates } from '../../utils/utils';
+import { TemplateLight } from '../../models/templates.model';
+import { getTemplatesList } from '../../utils/utils';
 
 const meta = {
   title: "Mockoon's pre-generated JSON templates",
@@ -14,7 +14,7 @@ const meta = {
 };
 
 export async function getStaticProps() {
-  const templates = await getTemplates();
+  const templates = await getTemplatesList();
 
   return {
     props: {
@@ -24,7 +24,7 @@ export async function getStaticProps() {
 }
 
 const Templates: FunctionComponent<{
-  templates: Template[];
+  templates: TemplateLight[];
 }> = function ({ templates }) {
   return (
     <Layout footerBanner='download'>

diff --git a/utils/utils.ts b/utils/utils.ts
@@ -29,6 +29,9 @@ export const orderArticles = (articles: ArticleList) => {
         : 0
   );
 };
+async function delay(ms: number) {
+  new Promise((resolve) => setTimeout(resolve, ms));
+}
 
 export const getDesktopLatestVersion = async () => {
   const response = await fetch(process.env.DESKTOP_LATEST_RELEASE_URL);
@@ -37,23 +40,20 @@ export const getDesktopLatestVersion = async () => {
   return data.tag;
 };
 
-export const getTemplates = async () => {
+export const getTemplatesList = async () => {
+  await delay(500);
   const listResponse = await fetch(
     `${process.env.NEXT_PUBLIC_BACKEND_URL}/templates`
   );
-  const templatesList: TemplateLight[] = await listResponse.json();
-
-  const templatesResponses = await Promise.all(
-    templatesList.map((templateEntry) => {
-      return fetch(
-        `${process.env.NEXT_PUBLIC_BACKEND_URL}/templates/${templateEntry.id}`
-      );
-    })
-  );
 
-  const templates: Template[] = await Promise.all(
-    templatesResponses.map((response) => response.json())
+  return (await listResponse.json()) as TemplateLight[];
+};
+
+export const getTemplate = async (slug: string) => {
+  await delay(500);
+  const templateResponse = await fetch(
+    `${process.env.NEXT_PUBLIC_BACKEND_URL}/templates/${slug}`
   );
 
-  return templates;
+  return (await templateResponse.json()) as Template[];
 };