Add loading fallback state for date picker

package.json

@@ -32,7 +32,7 @@
 		"next-themes": "^0.2.1",
 		"react": "18.2.0",
 		"react-cookie": "^4.1.1",
-		"react-datepicker": "4.11.0",
+		"react-datepicker": "4.10.0",
 		"react-dom": "18.2.0",
 		"react-dropzone": "14.2.3",
 		"react-error-boundary": "^4.0.4",

pnpm-lock.yaml

@@ -49,7 +49,7 @@ specifiers:
   prisma: ^4.12.0
   react: 18.2.0
   react-cookie: ^4.1.1
-  react-datepicker: 4.11.0
+  react-datepicker: 4.10.0
   react-dom: 18.2.0
   react-dropzone: 14.2.3
   react-error-boundary: ^4.0.4
@@ -84,7 +84,7 @@ dependencies:
   next-themes: 0.2.1_e7rdfuvvugpm7lhat2cbgcbani
   react: 18.2.0
   react-cookie: 4.1.1_react@18.2.0
-  react-datepicker: 4.11.0_biqbaboplfbrettd7655fr4n2y
+  react-datepicker: 4.10.0_biqbaboplfbrettd7655fr4n2y
   react-dom: 18.2.0_react@18.2.0
   react-dropzone: 14.2.3_react@18.2.0
   react-error-boundary: 4.0.4_react@18.2.0
@@ -6882,8 +6882,8 @@ packages:
       universal-cookie: 4.0.4
     dev: false
 
-  /react-datepicker/4.11.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==}
+  /react-datepicker/4.10.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-6IfBCZyWj54ZZGLmEZJ9c4Yph0s9MVfEGDC2evOvf9AmVz+RRcfP2Czqad88Ff9wREbcbqa4dk7IFYeXF1d3Ag==}
     peerDependencies:
       react: ^16.9.0 || ^17 || ^18
       react-dom: ^16.9.0 || ^17 || ^18

src/app/(drift)/(posts)/new/components/new.tsx

@@ -17,11 +17,11 @@ import Input from "@components/input"
 import ButtonDropdown from "@components/button-dropdown"
 import { useToasts } from "@components/toasts"
 import { fetchWithUser } from "src/app/lib/fetch-with-user"
-import "./react-datepicker.css"
 import dynamic from "next/dynamic"
 
 const DatePicker = dynamic(() => import("react-datepicker"), {
-	ssr: false
+	ssr: false,
+	loading: () => <Input label="Expires at" placeholder="Won't expire" width="100%" height="40px" />
 })
 
 const emptyDoc = {

src/app/(drift)/(posts)/new/page.tsx

@@ -1,5 +1,6 @@
 import { getMetadata } from "src/app/lib/metadata"
 import NewPost from "src/app/(drift)/(posts)/new/components/new"
+import "./components/react-datepicker.css"
 
 export default function New() {
 	return <NewPost />