diff --git a/examples/ckan/package-lock.json b/examples/ckan/package-lock.json
index 1cd5378d..83cdf384 100644
--- a/examples/ckan/package-lock.json
+++ b/examples/ckan/package-lock.json
@@ -1,15 +1,15 @@
 {
-  "name": "my-portal",
+  "name": "ckan",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "my-portal",
+      "name": "ckan",
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.0.18",
-        "@portaljs/ckan": "file:portaljs-ckan-0.1.2.tgz",
+        "@portaljs/ckan": "file:portaljs-ckan-0.1.4.tgz",
         "@types/node": "20.2.3",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
@@ -384,9 +384,14 @@
       }
     },
     "node_modules/@portaljs/ckan": {
-      "version": "0.1.2",
-      "resolved": "file:portaljs-ckan-0.1.2.tgz",
-      "integrity": "sha512-A03c8Rp6zxVLu/nXVLO98CvKqxCnS3R5B3DkXWe9H2JQThKihIFK83cNN+verzot+9nHjJytVbVO5VUytbYoPw==",
+      "version": "0.1.4",
+      "resolved": "file:portaljs-ckan-0.1.4.tgz",
+      "integrity": "sha512-95ro38GlSNGC2cedVpu2NvrjM0WOUH5d7zLCbqg27/gOP3ASKNLrM9T39IvFejxbcOsvF2DdNlY7nhWZI9wPAw==",
+      "dependencies": {
+        "formik": "^2.2.9",
+        "swr": "^2.1.5",
+        "timeago.js": "^4.0.2"
+      },
       "peerDependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -1098,6 +1103,14 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
+    "node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/default-browser": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
@@ -1887,6 +1900,34 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -2167,6 +2208,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
@@ -2699,6 +2748,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3416,6 +3475,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -3918,6 +3982,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.1.5.tgz",
+      "integrity": "sha512-/OhfZMcEpuz77KavXST5q6XE9nrOBOVcBLWjMT+oAE/kQHyE3PASrevXCtQDZ8aamntOfFkbVJp7Il9tNBQWrw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
@@ -4002,6 +4077,16 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/timeago.js": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz",
+      "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -4170,6 +4255,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/examples/ckan/package.json b/examples/ckan/package.json
index cc97ef98..33a95b02 100644
--- a/examples/ckan/package.json
+++ b/examples/ckan/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@portaljs/ckan": "*",
+    "@portaljs/ckan": "file:portaljs-ckan-0.1.4.tgz",
     "@types/node": "20.2.3",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
diff --git a/examples/ckan/pages/index.tsx b/examples/ckan/pages/index.tsx
index 8bf1097d..e771cbff 100644
--- a/examples/ckan/pages/index.tsx
+++ b/examples/ckan/pages/index.tsx
@@ -37,7 +37,7 @@ export default function Home({
   });
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 bg-zinc-900">
+    <main className="flex min-h-screen flex-col items-center p-24 bg-zinc-900">
       <DatasetSearchForm
         options={options}
         setOptions={setOptions}
diff --git a/packages/ckan/package.json b/packages/ckan/package.json
index 1cb61d99..6296f2e1 100644
--- a/packages/ckan/package.json
+++ b/packages/ckan/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/ckan",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [
diff --git a/packages/ckan/portaljs-ckan-0.1.2.tgz b/packages/ckan/portaljs-ckan-0.1.2.tgz
deleted file mode 100644
index a0c6fa44..00000000
Binary files a/packages/ckan/portaljs-ckan-0.1.2.tgz and /dev/null differ
diff --git a/packages/ckan/src/components/ListOfDatasets.tsx b/packages/ckan/src/components/ListOfDatasets.tsx
index 5e0b0eed..0829bd95 100644
--- a/packages/ckan/src/components/ListOfDatasets.tsx
+++ b/packages/ckan/src/components/ListOfDatasets.tsx
@@ -70,7 +70,7 @@ function ListItems({
   setOptions: Dispatch<SetStateAction<PackageSearchOptions>>;
   urlPrefix?: string;
 }) {
-  const { data } = useSWR(['package_search', options], async () =>
+  const { data, isLoading } = useSWR(['package_search', options], async () =>
     ckan.packageSearch({ ...options })
   );
   //Define which page buttons are going to be displayed in the pagination list
@@ -78,25 +78,31 @@ function ListItems({
 
   return (
     <>
-      <h2 className="text-4xl capitalize font-bold text-zinc-900">
-        {data?.count} Datasets
-      </h2>
-      {data?.datasets?.map((dataset) => (
-        <DatasetCard
-          key={dataset.id}
-          dataset={dataset}
-          showOrg={true}
-          urlPrefix={urlPrefix}
-        />
-      ))}
-      {data?.count && (
-        <Pagination
-          options={options}
-          subsetOfPages={subsetOfPages}
-          setSubsetOfPages={setSubsetOfPages}
-          setOptions={setOptions}
-          count={data.count}
-        />
+      {isLoading ? (
+        <div className="loader mb-4 h-12 w-12 rounded-full border-4 border-t-4 border-gray-200 ease-linear"></div>
+      ) : (
+        <>
+          <h2 className="text-4xl capitalize font-bold text-zinc-900">
+            {data?.count} Datasets
+          </h2>
+          {data?.datasets?.map((dataset) => (
+            <DatasetCard
+              key={dataset.id}
+              dataset={dataset}
+              showOrg={true}
+              urlPrefix={urlPrefix}
+            />
+          ))}
+          {data?.count && (
+            <Pagination
+              options={options}
+              subsetOfPages={subsetOfPages}
+              setSubsetOfPages={setSubsetOfPages}
+              setOptions={setOptions}
+              count={data.count}
+            />
+          )}
+        </>
       )}
     </>
   );