Load measurement on the client side (#1085)

Author: majakomel

.github/workflows/playwright.yml

@@ -6,7 +6,7 @@ on:
     branches: [ main, master ]
 jobs:
   test:
-    timeout-minutes: 60
+    timeout-minutes: 90
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v5

components/Footer.js

@@ -26,7 +26,7 @@ const Footer = () => {
     year: 'numeric',
   }).format(new Date())
   return (
-    <footer className="text-white mt-8 bg-blue-900">
+    <footer className="text-white bg-blue-900">
       <div className="container">
         <div className="flex flex-wrap">
           <div className="py-6 w-full md:w-2/5">

components/Layout.js

@@ -36,8 +36,8 @@ const Layout = ({ children, isEmbeddedView }) => {
 
   return (
     <UserProvider>
-      <div className="site flex flex-col min-h-[100vh]">
-        <div className="flex-[1_0_auto]">
+      <div className="site">
+        <div className="flex flex-col min-h-screen">
           <Header />
           {!isEmbeddedView && (
             <ConditionalWrapper
@@ -49,7 +49,9 @@ const Layout = ({ children, isEmbeddedView }) => {
               <NavBar color={navbarColor} />
             </ConditionalWrapper>
           )}
-          <div className={`content ${!navbarColor ? 'mt-[-66px]' : ''}`}>
+          <div
+            className={`content flex-1 flex flex-col ${!navbarColor ? 'mt-[-66px]' : ''}`}
+          >
             {children}
           </div>
         </div>

components/vendor/SpinLoader.js

@@ -9,7 +9,7 @@ const getClassName = (classes) =>
     classes,
   )
 
-const SpinLoader = ({ className, props }) => (
+const SpinLoader = ({ className = '' }) => (
   <CgSpinner className={getClassName(className)} />
 )
 

pages/countries.js

@@ -8,6 +8,7 @@ import { useMemo, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
 import { StickySubMenu } from '../components/SharedStyledComponents'
+import countries from 'data/countries.json'
 
 const Regions = ({ regions, countries }) => {
   return regions.map((regionCode, index) => {
@@ -19,7 +20,7 @@ const Regions = ({ regions, countries }) => {
 
     return (
       <RegionBlock
-        key={index}
+        key={regionCode}
         regionCode={regionCode}
         countries={countries.filter(
           (c) => measuredCountriesInRegion.indexOf(c.alpha_2) > -1,
@@ -72,19 +73,7 @@ const NoCountriesFound = ({ searchTerm }) => (
   </div>
 )
 
-export const getStaticProps = async () => {
-  const client = axios.create({ baseURL: process.env.NEXT_PUBLIC_OONI_API })
-  const result = await client.get('/api/_/countries')
-
-  return {
-    props: {
-      countries: result.data.countries,
-    },
-    revalidate: 60 * 60 * 12, // 12 hours
-  }
-}
-
-const Countries = ({ countries }) => {
+const Countries = () => {
   const intl = useIntl()
   const [searchInput, setSearchInput] = useState('')
 
@@ -101,7 +90,7 @@ const Countries = ({ countries }) => {
             b.localisedName,
           ),
         ),
-    [intl, countries],
+    [intl],
   )
 
   const filteredCountries = useMemo(

pages/index.tsx

@@ -117,13 +117,11 @@ const LandingPage = ({
               <FormattedMessage id="Home.Banner.Subtitle.ExploreCensorshipEvents" />
             </div>
             <div className="inline-block">
-              <Link href="/chart/mat">
-                <button
-                  className="btn btn-white-hollow hover:!text-white btn-xl mt-12 mx-auto"
-                  type="button"
-                >
-                  <FormattedMessage id="Home.Banner.Button.Explore" />
-                </button>
+              <Link
+                href="/chart/mat"
+                className="btn btn-white-hollow hover:!text-white btn-xl mt-12 mx-auto"
+              >
+                <FormattedMessage id="Home.Banner.Button.Explore" />
               </Link>
             </div>
           </div>