loading indicator, use Revise when in dev

Project.toml

@@ -8,6 +8,7 @@ DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 Distributions = "31c24e10-a181-5473-b8eb-7969acd0382f"
 GenieFramework = "a59fdf5c-6bf0-4f5d-949c-a137c9e2f353"
 Revise = "295af30f-e4ad-537b-8983-00126c2a3abe"
+StippleTable = "5bb4b094-0818-496d-ae94-fd777e10e8ba"
 
 [Genie]
 instantiated_pwd = "/Users/pere/genie/genieawesome/ActuaryData"

Yelt.jl

@@ -27,23 +27,10 @@ const rp_analysis = calculate_return_periods(yearly_losses, _return_periods)
     @out return_periods = _return_periods
     @out pagination = DataTablePagination(rows_per_page=10, rows_number=size(yelt_data)[1])
     @in filteryelt = ""
+    @out loading = false
     @out columns = vcat("All", _columns)
     @in select_filter_columns = ["All"]
 
-    @event requestyelt begin
-        # the process_request function will select the portion of df to be displayed as table_page
-        @show filteryelt
-        filter_columns = "All" in select_filter_columns   ? _columns : select_filter_columns
-        filtered_data = yelt_data[[any(occursin(filteryelt, string(row[col])) for col in filter_columns) for row in eachrow(yelt_data)], :]
-        println(size(filtered_data))
-        if nrow(filtered_data) != 0
-        state = StippleUI.Tables.process_request(filtered_data, yelt_data_table, pagination, "")
-        yelt_data_table = state.datatable   # the selected portion of df
-        pagination = state.pagination # update the pagination state in the backend and the browser
-        else
-        yelt_data_table = DataTable()
-        end
-    end
 
     @in selected_return_period = min(100, _data_years)
 
@@ -54,6 +41,22 @@ const rp_analysis = calculate_return_periods(yearly_losses, _return_periods)
 
 end
 
+# events should be placed outside of the @app block
+    @event requestyelt begin
+      loading = true 
+      filter_columns = "All" in select_filter_columns   ? _columns : select_filter_columns
+      filtered_data = yelt_data[[any(occursin(filteryelt, string(row[col])) for col in filter_columns) for row in eachrow(yelt_data)], :]
+      if nrow(filtered_data) != 0
+        # the process_request function will select the portion of df to be displayed as table_page
+        state = StippleUI.Tables.process_request(filtered_data, yelt_data_table, pagination, "")
+        yelt_data_table = state.datatable   # the selected portion of df
+        pagination = state.pagination # update the pagination state in the backend and the browser
+      else
+        yelt_data_table = DataTable()
+      end
+      loading = false
+    end
+
 @page("/yelt", "yelt.jl.html")
 
 end

app.jl

@@ -1,5 +1,10 @@
 module App
 using Revise
-include("Contracts.jl")
-include("Yelt.jl")
+if ENV["GENIE_ENV"] == "prod"
+  include("Contracts.jl")
+  include("Yelt.jl")
+else
+  includet("Contracts.jl")
+  includet("Yelt.jl")
+end
 end

yelt.jl.html

@@ -18,7 +18,7 @@
 <main style="max-width: 95%; margin: 2rem auto; padding: 0 1rem">
         <div style="display: flex; gap: 2rem; margin-bottom: 2rem;">
             <div style=" background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1.5rem; width=60%; min-width=60%; overflow:hidden">
-                <q-table row-key="__id" :columns="yelt_data_table.columns" v-model="yelt_data_table" title="YELT" :data="yelt_data_table.data" v-on:request="function (event) { handle_event(event, 'requestyelt'); }" :pagination="pagination" :pagination.sync="pagination" :filter="filteryelt">
+                <q-table row-key="__id" :columns="yelt_data_table.columns" v-model="yelt_data_table" title="YELT" :data="yelt_data_table.data" :loading="loading" v-on:request="function (event) { handle_event(event, 'requestyelt'); }" :pagination="pagination" :pagination.sync="pagination" :filter="filteryelt">
                     <template v-slot:top-right>
                         <q-select id="ig55" label="Filter columns" v-model="select_filter_columns" :multiple="true" :options="columns" :use-chips="true" dense style="margin-right:30px;min-width:100px" ></q-select>
                         <q-input  v-model="filteryelt" debounce="0" label="Filter" dense style="width: 200px;" v-on:keyup.enter="function (event) { handle_event(event, 'requestyelt'); }">
@@ -28,6 +28,8 @@
                         </q-input>
                     </template>
                 </q-table>
+
+                <p style="color: darkred; margin-top: 0.5rem;">Press Enter to submit the filter query.</p>
             </div>
             <div style="flex: 1; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 1.5rem;width=40%">
                 <h6 style="font-size: 1.1rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem;">Yearly losses</h6>