useKShow link to current page

pull/1218 | Release notes

Overview
#

A composable that offers the show reactive function which guarantees that something will be displayed at least for a specified duration after an initial trigger. It is typically used to guarantee minimum visible time behavior of loading state.

See the loaders page for more information and guidelines.

Usage
#

show(key, shouldShow, minVisibleTime) 

      <div v-if="show('key-1', isLoading, minVisibleTime)">Loading...</div>
      <div v-else>Loaded!</div>
    

      import useKShow from 'kolibri-design-system/lib/composables/useKShow';

      export default {
        setup() {
          const { show } = useKShow();
          return { show };
        }
      };

Example
#

This is a simulation of a typical use-case of showing a loader while fetching data. You can set your own fetch request length and minimum visible time, and then hit the fetch button to see the output. 


      <KTransition kind="component-fade-out-in">
        <KCircularLoader
          v-if="show('key-1', isFetching, minVisibleTime )"  
        />
        <div v-else>
          Loaded!
        </div>
      </KTransition>
Output:
Loaded!
isFetching: false minVisibleTime: 400

Parameters
#

Name Description Type Default Required
key
#
Each show function instance has to pass a key unique in the context of a whole page to this attribute
 number|string — true
shouldShow
#
Accurate, real-time information on whether something should be shown. For example, it should be set to false for a loader immediately after related data have finished loading.
 boolean — —
minVisibleTime
#
For how long should show return true after an initial trigger. Recommended value for loaders is 400ms.
 number — —

Returns
#

Type: boolean

Description: Returns true after shouldShow becomes truthy and keeps returning true for the duration of minVisibleTime (even when shouldShow changes back to falsy meanwhile). After minVisibleTime elapses and when shouldShow is falsy already, it returns false.