feat: add image loading

.gitignore

@@ -46,3 +46,7 @@ yarn-error.log*
 
 
 .idea/
+
+
+.open-next
+.sst

next.config.mjs

@@ -27,7 +27,10 @@ const config = {
         hostname: "api.dicebear.com",
       },
     ],
-    domains: ["dcm2976bhgfsz.cloudfront.net"],
+    domains: [
+      "dcm2976bhgfsz.cloudfront.net",
+      "ratemysurau.s3.ap-southeast-1.amazonaws.com"
+    ],
     dangerouslyAllowSVG: true,
   },
 };

package.json

@@ -1,65 +1,68 @@
-{
-  "name": "ratemysurau",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build": "next build",
-    "dev": "next dev",
-    "postinstall": "prisma generate",
-    "lint": "next lint",
-    "start": "next start",
-    "db-seed": "cross-env NODE_ENV=development prisma db seed",
-    "compare": "NODE_ENV=development tsx prisma/compare.ts",
-    "setup-db": "make"
-  },
-  "prisma": {
-    "seed": "tsx prisma/seed.ts",
-    "compare-speed": "tsx prisma/compare.ts"
-  },
-  "dependencies": {
-    "@headlessui/react": "^1.7.10",
-    "@heroicons/react": "^2.0.15",
-    "@next-auth/prisma-adapter": "^1.0.5",
-    "@prisma/client": "^4.9.0",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@tanstack/react-query": "^4.20.0",
-    "@trpc/client": "^10.9.0",
-    "@trpc/next": "^10.9.0",
-    "@trpc/react-query": "^10.9.0",
-    "@trpc/server": "^10.9.0",
-    "next": "13.1.6",
-    "next-auth": "^4.19.0",
-    "next-s3-upload": "^0.3.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-select": "^5.7.0",
-    "superjson": "1.9.1",
-    "tsx": "^3.12.5",
-    "use-debounce": "^9.0.3",
-    "zod": "^3.20.2"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.31.2",
-    "@types/node": "^18.11.18",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.47.1",
-    "@typescript-eslint/parser": "^5.47.1",
-    "autoprefixer": "^10.4.7",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.30.0",
-    "eslint-config-next": "13.1.6",
-    "postcss": "^8.4.14",
-    "prettier": "^2.8.1",
-    "prettier-plugin-tailwindcss": "^0.2.1",
-    "prisma": "^4.9.0",
-    "tailwindcss": "^3.2.0",
-    "typescript": "^4.9.4"
-  },
-  "ct3aMetadata": {
-    "initVersion": "7.5.1"
-  }
-}
+{
+  "name": "ratemysurau",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "sst bind next dev --profile=sk8jx",
+    "postinstall": "prisma generate",
+    "lint": "next lint",
+    "start": "next start",
+    "dev-local": "next dev",
+    "db-seed": "cross-env NODE_ENV=development prisma db seed",
+    "compare": "NODE_ENV=development tsx prisma/compare.ts",
+    "setup-db": "make"
+  },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts",
+    "compare-speed": "tsx prisma/compare.ts"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.10",
+    "@heroicons/react": "^2.0.15",
+    "@next-auth/prisma-adapter": "^1.0.5",
+    "@prisma/client": "^4.9.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@tanstack/react-query": "^4.20.0",
+    "@trpc/client": "^10.9.0",
+    "@trpc/next": "^10.9.0",
+    "@trpc/react-query": "^10.9.0",
+    "@trpc/server": "^10.9.0",
+    "next": "13.1.6",
+    "next-auth": "^4.19.0",
+    "next-s3-upload": "^0.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-select": "^5.7.0",
+    "superjson": "1.9.1",
+    "tsx": "^3.12.5",
+    "use-debounce": "^9.0.3",
+    "zod": "^3.20.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.31.2",
+    "@types/node": "^18.11.18",
+    "@types/prettier": "^2.7.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "autoprefixer": "^10.4.7",
+    "aws-cdk-lib": "2.72.1",
+    "constructs": "10.1.156",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "13.1.6",
+    "postcss": "^8.4.14",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "prisma": "^4.9.0",
+    "tailwindcss": "^3.2.0",
+    "typescript": "^4.9.4"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.5.1"
+  }
+}

src/components/SurauOverview.tsx

@@ -54,6 +54,8 @@ const SurauOverview: FC<SurauOverviewProps> = ({ surau }) => {
               width={500}
               height={300}
               priority
+              placeholder="blur"
+              blurDataURL="/assets/logo/rms_logo_new_1.png"
             />
             <div className="space-x-2 flex items-center justify-center overflow-auto mt-2">
               {surau?.images.map((image) => (