diff --git a/.storybook/bundle.ts b/.storybook/bundle.ts
index b5a03aff53..01df05f09e 100644
--- a/.storybook/bundle.ts
+++ b/.storybook/bundle.ts
@@ -13,4 +13,4 @@ import FilterSimpleCondition from '../src/components/stepforms/widgets/FilterSim
 import ListUniqueValues from '../src/components/ListUniqueValues.vue';
 
 export { FilterSimpleCondition, ConditionsEditor, DataViewer, RenameStepForm, Pipeline, ResizablePanels, Step, ListUniqueValues };
-export { setupStore } from '../src/store';
+export { setupStore, registerModule, VQBnamespace } from '../src/store';
diff --git a/stories/list-unique-values.js b/stories/list-unique-values.js
index 1d135daf9b..fee7520dd8 100644
--- a/stories/list-unique-values.js
+++ b/stories/list-unique-values.js
@@ -1,22 +1,55 @@
 import { storiesOf } from '@storybook/vue';
+import Vuex from 'vuex';
+import Vue from 'vue';
 
-import { ListUniqueValues } from '../dist/storybook/components';
+import { ListUniqueValues, registerModule, VQBnamespace } from '../dist/storybook/components';
 const stories = storiesOf('ListUniqueValues', module);
+Vue.use(Vuex)
 
 stories.add('default', () => ({
+  store: new Vuex.Store({}),
+  created: function() {
+    registerModule(this.$store, {
+      dataset: {
+        headers: [{name: 'col1', isUniqueValuesLoading: false}],
+        data: [],
+      }
+    });
+  },
   components: { ListUniqueValues },
+  methods: {
+    loadAllValues(){
+      this.$store.commit(VQBnamespace('setUniqueValuesLoading'), { isLoading: true, column: 'col1' });
+      // simulate the call to get all unique values of dataset:
+      setTimeout(() => {
+        this.options = [
+          {value: 'Germany', count: 120},
+          {value: 'US', count: 34},
+          {value: 'Italy', count: 33},
+          {value: 'China', count: 24},
+          {value: 'France', count: 12},
+          {value: 'Framboise', count: 10},
+          {value: 'UK', count: 1},
+        ];
+        this.loaded = false;
+        this.$store.commit(VQBnamespace('setUniqueValuesLoading'), { isLoading: false, column: 'col1' });
+      }, 3000); // the call take 3sec
+    }
+  },
   data(){
     return {
         options: [
-            {value: 'France', count: 12},
-            {value: 'UK', count: 1},
+            {value: 'Italy', count: 23},
             {value: 'China', count: 14},
+            {value: 'France', count: 12},
             {value: 'Framboise', count: 10},
-            {value: 'Italy', count: 23},
+            {value: 'UK', count: 1},
         ],
         filter: { column: "col1", operator: "in", value: []},
-        loaded: false,
+        loaded: true,
     }
   },
-  template: `<div><ListUniqueValues :loaded="loaded" :filter="filter" @input="filter = $event" :options="options"/></div>`,
+  template: `<div style="width: 200px">
+    <ListUniqueValues :loaded="loaded" :filter="filter" @input="filter = $event" :options="options" @loadAllValues="loadAllValues"/>
+  </div>`,
 }));