diff --git a/app/config/environment.d.ts b/app/config/environment.d.ts
index b7fc6c5b7a..863cd9add0 100644
--- a/app/config/environment.d.ts
+++ b/app/config/environment.d.ts
@@ -19,7 +19,6 @@ export interface KeenConfig {
 
 declare const config: {
     WATER_BUTLER_ENABLED: boolean;
-    PREPRINT_ADAPTER_OPTIONS_ENABLED: boolean;
     plauditWidgetUrl: string,
     environment: any;
     cedarConfig: any;
diff --git a/app/preprints/-components/preprint-metrics/component.ts b/app/preprints/-components/preprint-metrics/component.ts
new file mode 100644
index 0000000000..170ce05beb
--- /dev/null
+++ b/app/preprints/-components/preprint-metrics/component.ts
@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+import { waitFor } from '@ember/test-waiters';
+import { taskFor } from 'ember-concurrency-ts';
+import Store from '@ember-data/store';
+import config from 'ember-osf-web/config/environment';
+import { BaseMeta } from 'osf-api';
+
+
+interface InputArgs {
+    guid: string;
+}
+
+export default class PreprintMetrics extends Component<InputArgs> {
+    @service store!: Store;
+    @tracked apiMetrics!: BaseMeta;
+
+    metricsStartDate = config.OSF.metricsStartDate;
+
+    constructor(owner: unknown, args: InputArgs) {
+        super(owner, args);
+
+        taskFor(this.loadPreprintMetrics).perform();
+    }
+
+    @task
+    @waitFor
+    private async loadPreprintMetrics()  {
+        try {
+            const adapterOptions = Object({
+                query: {
+                    'metrics[views]': 'total',
+                    'metrics[downloads]': 'total',
+                },
+            });
+
+            const preprintMetrics = await this.store.findRecord('preprint', this.args.guid, {
+                reload: true,
+                adapterOptions,
+            });
+
+            this.apiMetrics = preprintMetrics.apiMetrics;
+        // eslint-disable-next-line
+        } catch (_){ }
+    }
+}
diff --git a/app/preprints/-components/preprint-metrics/template.hbs b/app/preprints/-components/preprint-metrics/template.hbs
new file mode 100644
index 0000000000..324fd2d29e
--- /dev/null
+++ b/app/preprints/-components/preprint-metrics/template.hbs
@@ -0,0 +1,17 @@
+<div>
+    {{#if this.loadPreprintMetrics.isRunning}}
+        <LoadingIndicator data-test-loading-indicator @dark={{true}} />
+    {{else}} 
+        <span data-test-view-count-label>
+            {{t 'preprints.detail.share.views'}}:
+        </span>
+        <span data-test-view-count> {{this.apiMeta?.metrics?.views}} </span> |
+        <span data-test-download-count-label>
+            {{t 'preprints.detail.share.downloads'}}:
+        </span>
+        <span data-test-download-count>{{this.apiMeta?.metrics?.downloads}}</span>
+        <EmberTooltip>
+            {{t 'preprints.detail.share.metrics_disclaimer'}} {{moment-format this.metricsStartDate 'YYYY-MM-DD'}}
+        </EmberTooltip>
+    {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/preprints/detail/controller.ts b/app/preprints/detail/controller.ts
index 22d184bce3..b803be299d 100644
--- a/app/preprints/detail/controller.ts
+++ b/app/preprints/detail/controller.ts
@@ -61,7 +61,6 @@ export default class PrePrintsDetailController extends Controller {
     @tracked fullScreenMFR = false;
     @tracked plauditIsReady = false;
 
-    metricsStartDate = config.OSF.metricsStartDate;
     reviewStateLabelKeyMap = VersionStatusSimpleLabelKey;
 
     get hyperlink(): string {
diff --git a/app/preprints/detail/route.ts b/app/preprints/detail/route.ts
index 99e7e0691d..d644d078f9 100644
--- a/app/preprints/detail/route.ts
+++ b/app/preprints/detail/route.ts
@@ -60,18 +60,11 @@ export default class PreprintsDetail extends Route {
                 'contributors',
                 'identifiers',
             ];
-            const adapterOptions = config.PREPRINT_ADAPTER_OPTIONS_ENABLED ?  Object({
-                query: {
-                    'metrics[views]': 'total',
-                    'metrics[downloads]': 'total',
-                },
-            }) : undefined;
 
 
             const preprint = await this.store.findRecord('preprint', guid, {
                 reload: true,
                 include: embeddableFields,
-                adapterOptions,
             });
 
             const provider = await preprint?.get('provider');
@@ -122,6 +115,7 @@ export default class PreprintsDetail extends Route {
                 && !isWithdrawalRejected && !hasPendingWithdrawal;
 
             return {
+                guid,
                 preprint,
                 brand: provider.brand.content,
                 contributors,
diff --git a/app/preprints/detail/template.hbs b/app/preprints/detail/template.hbs
index c7952a6e00..317e1eed43 100644
--- a/app/preprints/detail/template.hbs
+++ b/app/preprints/detail/template.hbs
@@ -194,17 +194,9 @@
                             </OsfLink>
                         </div>
                         <div>
-                            <span data-test-view-count-label>
-                                {{t 'preprints.detail.share.views'}}:
-                            </span>
-                            <span data-test-view-count> {{this.model.preprint.apiMeta.metrics.views}} </span> |
-                            <span data-test-download-count-label>
-                                {{t 'preprints.detail.share.downloads'}}:
-                            </span>
-                            <span data-test-download-count>{{this.model.preprint.apiMeta.metrics.downloads}}</span>
-                            <EmberTooltip>
-                                {{t 'preprints.detail.share.metrics_disclaimer'}} {{moment-format this.metricsStartDate 'YYYY-MM-DD'}}
-                            </EmberTooltip>
+                            <Preprints::-Components::PreprintMetrics
+                                @guid={{this.model.guid}}
+                            ></Preprints::-Components::PreprintMetrics>
                         </div>
                     </div>
                     <div local-class='plaudit-container'>
diff --git a/config/environment.js b/config/environment.js
index 755bb97e24..b35ce2b885 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -62,7 +62,6 @@ const {
     KEEN_CONFIG: keenConfig,
     LINT_ON_BUILD: lintOnBuild = false,
     WATER_BUTLER_ENABLED = true,
-    PREPRINT_ADAPTER_OPTIONS_ENABLED = true,
     MIRAGE_ENABLED = false,
     MIRAGE_SCENARIOS = [
         'cedar',
@@ -119,7 +118,6 @@ module.exports = function(environment) {
         modulePrefix: 'ember-osf-web',
         cedarConfig,
         WATER_BUTLER_ENABLED,
-        PREPRINT_ADAPTER_OPTIONS_ENABLED,
         plauditWidgetUrl,
         environment,
         lintOnBuild,