Fix puppeteer waits

DrakeAxelrod · Dec 30, 2021 · 0b87a90 · 0b87a90
1 parent eefec9a
commit 0b87a90
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 13 deletions.
diff --git a/components/resume/ResumeHeader.tsx b/components/resume/ResumeHeader.tsx
@@ -39,6 +39,7 @@ export const ResumeHeader: FC<ResumeHeaderProps> = ({ resume }) => {
       <p className={styles.contact}>
         <Exists exists={resume.basics?.url}>
           <a
+            id="icon"
             className={`${styles.icon} fas fa-link`}
             href={setHttps(resume.basics?.url)}
             target="_blank"
@@ -48,7 +49,7 @@ export const ResumeHeader: FC<ResumeHeaderProps> = ({ resume }) => {
         </Exists>
         <Exists exists={resume.basics?.phone}>
           <span>
-            <i className={`${styles.icon} fas fa-phone`}></i>{" "}
+            <i id="icon" className={`${styles.icon} fas fa-phone`}></i>{" "}
             {formatPhoneNumber(
               resume.basics?.phone,
               resume.basics?.location?.countryCode as CountryCode
@@ -58,6 +59,7 @@ export const ResumeHeader: FC<ResumeHeaderProps> = ({ resume }) => {
         <Exists exists={resume.basics?.email}>
           <span>
             <a
+              id="icon"
               className={`${styles.icon} fas fa-envelope`}
               href={`mailto: ${resume.basics?.email}`}
               target="_blank"
@@ -70,6 +72,7 @@ export const ResumeHeader: FC<ResumeHeaderProps> = ({ resume }) => {
           return (
             <span key={i}>
               <a
+                id="icon"
                 target="_blank"
                 rel="noreferrer"
                 className={`${

diff --git a/components/resume/index.tsx b/components/resume/index.tsx
@@ -18,7 +18,7 @@ const Resume: FC<Props> = ({ resume, order = defaultOrder }) => {
     <section className={styles["resume-page"]}>
       <Exists exists={keys}>
         <div className={styles.A4}>
-          <article className={styles.resume}>
+          <article className={styles.resume} id="resume">
             <ResumeHeader resume={resume} />
             {result.map((name, i) => {
               return <Section key={i} resume={resume} name={name} />;

diff --git a/lib/api/puppeteer/index.ts b/lib/api/puppeteer/index.ts
@@ -14,8 +14,10 @@ export async function getPage(isDev: boolean) {
 
 export async function getPDF(uri: string, isDev: boolean) {
     const page = await getPage(isDev);
-    await page.goto(uri)
-    await page.waitForSelector(".loaded", { timeout: 4900 })
+    await page.goto(uri, {waitUntil: "networkidle2"})
+    await page.waitForTimeout(4000)
+    await page.waitForSelector("#resume")
+    await page.waitForSelector("#icon");
     const file = await page.pdf({ format: 'a4' })
     return file;
 }
diff --git a/pages/[username].tsx b/pages/[username].tsx
@@ -12,25 +12,28 @@ const fetcher = async (url: string) => await api.get(url).then(res => res.data);
 
 function GetResume(username: string | string[] | undefined, placeholder: Resume) {
   const { data, error } = useSWR(`/api/github/gists/json/${username}`, fetcher);
+  const resume = data ? data : placeholder
   // console.log(data);
   if (error) return (
     <div className="loaded">
-      <Resume resume={placeholder} />
+      <Resume resume={resume} />
     </div>
   );
   if (!data) return (
-    <div className={styles.background}>
-      <div className={styles.loading}>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+    <div className="loading">
+      <div className={styles.background}>
+        <div className={styles.loading}>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
       </div>
     </div>
   );
   return (
     <div className="loaded">
-      <Resume resume={data} />
+      <Resume resume={resume} />
     </div>
   );
 }

diff --git a/styles/resume.module.scss b/styles/resume.module.scss
@@ -86,7 +86,7 @@ $title: $text; // might not need rest
   background: white;
   box-shadow: $shadow;
   -webkit-box-shadow: $shadow;
-  animation: fadeIn 2.0s ease forwards;
+  // animation: fadeIn 1s ease forwards;
   // h2 {
   //   line-height: 1.5;
   // }
@@ -106,6 +106,26 @@ $title: $text; // might not need rest
     animation: none;
     box-shadow: none;
     -webkit-box-shadow: none;
+    opacity: 1;
+  }
+
+  @-o-keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @-ms-keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   }
   @keyframes fadeIn {
     0% {
@@ -320,6 +340,17 @@ $title: $text; // might not need rest
   text-decoration: none;
   background: black;
   color: white;
+  @media print {
+    // this needs to be hyper fined tuned for correct printing
+    // padding: 0 25.4mm;
+    font-size: 0.75em;
+    color: black;
+    animation: none;
+    box-shadow: none;
+    width: 2em;
+    height: 2em;
+    -webkit-box-shadow: none;
+  }
 }
 .icon:hover {
   opacity: 0.7;