FEATURE: Load usage data after page load

Use ConditionalLoadingSpinner to hide load of usage
data, this prevents us hanging on page load with a white
screen.

Author: martin-brennan

app/controllers/discourse_ai/admin/ai_usage_controller.rb

@@ -6,6 +6,9 @@ class AiUsageController < ::Admin::AdminController
       requires_plugin "discourse-ai"
 
       def show
+      end
+
+      def report
         render json: AiUsageSerializer.new(create_report, root: false)
       end
 

assets/javascripts/discourse/components/ai-usage.gjs

@@ -5,6 +5,7 @@ import { action } from "@ember/object";
 import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
 import { eq } from "truth-helpers";
+import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";
 import DButton from "discourse/components/d-button";
 import DateTimeInputRange from "discourse/components/date-time-input-range";
 import avatar from "discourse/helpers/avatar";
@@ -24,18 +25,30 @@ export default class AiUsage extends Component {
   @tracked selectedModel;
   @tracked selectedPeriod = "month";
   @tracked isCustomDateActive = false;
+  @tracked loadingData = true;
+
+  constructor() {
+    super(...arguments);
+    this.fetchData();
+  }
 
   @action
   async fetchData() {
-    const response = await ajax("/admin/plugins/discourse-ai/ai-usage.json", {
-      data: {
-        start_date: moment(this.startDate).format("YYYY-MM-DD"),
-        end_date: moment(this.endDate).format("YYYY-MM-DD"),
-        feature: this.selectedFeature,
-        model: this.selectedModel,
-      },
-    });
+    const response = await ajax(
+      "/admin/plugins/discourse-ai/ai-usage-report.json",
+      {
+        data: {
+          start_date: moment(this.startDate).format("YYYY-MM-DD"),
+          end_date: moment(this.endDate).format("YYYY-MM-DD"),
+          feature: this.selectedFeature,
+          model: this.selectedModel,
+        },
+      }
+    );
     this.data = response;
+    this.loadingData = false;
+    this._cachedFeatures = null;
+    this._cachedModels = null;
   }
 
   @action
@@ -312,7 +325,7 @@ export default class AiUsage extends Component {
           />
         </div>
 
-        {{#if this.data}}
+        <ConditionalLoadingSpinner @condition={{this.loadingData}}>
           <AdminConfigAreaCard
             @heading="discourse_ai.usage.summary"
             class="ai-usage__summary"
@@ -492,7 +505,7 @@ export default class AiUsage extends Component {
               </:content>
             </AdminConfigAreaCard>
           </div>
-        {{/if}}
+        </ConditionalLoadingSpinner>
       </div>
     </div>
   </template>

config/routes.rb

@@ -79,6 +79,7 @@
         to: "discourse_ai/admin/rag_document_fragments#indexing_status_check"
 
     get "/ai-usage", to: "discourse_ai/admin/ai_usage#show"
+    get "/ai-usage-report", to: "discourse_ai/admin/ai_usage#report"
 
     resources :ai_llms,
               only: %i[index create show update destroy],