Merge pull request #107 from jedmund/performance-fixes

Browser performance fixes

components/Input/index.tsx

@@ -8,13 +8,13 @@ interface Props
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
   > {
-  visible?: boolean
+  visible?: string
   error?: string
   label?: string
 }
 
 const defaultProps = {
-  visible: true,
+  visible: 'true',
 }
 
 const Input = React.forwardRef<HTMLInputElement, Props>(function Input(

components/JobSection/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
@@ -8,7 +8,6 @@ import JobSkillItem from '~components/JobSkillItem'
 import SearchModal from '~components/SearchModal'
 
 import { appState } from '~utils/appState'
-
 import type { JobSkillObject, SearchableObject } from '~types'
 
 import './index.scss'
@@ -132,7 +131,11 @@ const JobSection = (props: Props) => {
   return (
     <section id="Job">
       <div className="JobImage">
-        <img src={imageUrl} />
+        {party.job && party.job.id !== '-1' ? (
+          <img alt={party.job.name[locale]} src={imageUrl} />
+        ) : (
+          ''
+        )}
         <div className="Overlay" />
       </div>
       <div className="JobDetails">

components/JobSkillSearchFilterBar/index.tsx

@@ -18,6 +18,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
   const [currentGroup, setCurrentGroup] = useState(-1)
 
   function openSelect() {
+    // debugger
     setOpen(!open)
   }
 

components/Overlay/index.tsx

@@ -11,13 +11,16 @@ const defaultProps = {
   visible: true,
 }
 
-const Overlay = ({
-  visible: displayed,
-  open,
-}: {
-  visible: boolean
-  open: boolean
-}) => {
+const Overlay = React.forwardRef<HTMLDivElement, Props>(function Overlay(
+  {
+    visible: displayed,
+    open,
+  }: {
+    visible: boolean
+    open: boolean
+  },
+  forwardedRef
+) {
   const [visible, setVisible] = useState(open)
 
   const classes = classNames({
@@ -43,7 +46,7 @@ const Overlay = ({
   }
 
   return visible ? <div className={classes} onClick={handleClick} /> : null
-}
+})
 
 Overlay.defaultProps = defaultProps
 

package.json

@@ -11,14 +11,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^0.1.5",
-    "@radix-ui/react-dialog": "^0.1.5",
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
-    "@radix-ui/react-hover-card": "^0.1.5",
+    "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.1",
+    "@radix-ui/react-hover-card": "^1.0.2",
     "@radix-ui/react-select": "^1.1.2",
-    "@radix-ui/react-switch": "^0.1.5",
+    "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.2",
-    "@radix-ui/react-toggle-group": "^0.1.5",
+    "@radix-ui/react-toggle-group": "^1.0.1",
     "@svgr/webpack": "^6.2.0",
     "axios": "^0.25.0",
     "classnames": "^2.3.1",